.get() JQ Home  <<  D.E.M.  <<  .get()

DOM element retrieval.

Description

The .get() method is used to retrieve DOM elements matched by the jQuery object.

Syntax

Signature Description
.get()Retrieve the DOM elements matched by the jQuery object.
.get( index )Retrieve the DOM element at the specified zero-based index.

Parameters

Parameter Description Type
indexZero based index of the element to match.
Negative values are allowed and start at end of index from -1.		Number

Return

A JavaScript Array object of DOM elements.

.get() Example D.E.M.  <<  Top

Retrieve DOM elements matched by the jQuery object.

In the example below we select all 'tr' elements within the table with a class of 'testtable' and then change the background colour within the matched set.

Table For Testing The .get() Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('#btn1').on('click', function() {
    var $a = $('.testtable tr').get();
    $($a).css('backgroundColor', 'orange');
  });
});

Press the button below to action the above code:

.get( index ) Example D.E.M.  <<  Top

Retrieve the DOM element at the specified zero-based index.

This signature of the .get() method which accepts an index and returns a DOM node is the inverse of the .index( element ) signature of the .index() method which accepts a DOM node and returns an index.

In the example below we select the second element or last element dependant upon the button clicked and then change the background colour within the matched set.

Table For Testing The .get( index ) Signature
Table Row 1, Table Data 1 Table Row 1, Table Data 2
Table Row 2, Table Data 1 Table Row 2, Table Data 2
Table Row 3, Table Data 1 Table Row 3, Table Data 2
Table Row 4, Table Data 1 Table Row 4, Table Data 2 


$(function(){
  $('#btn2').on('click', function() {
    var $a = $('.testtable2 tr').get(1);
    $($a).css('backgroundColor', 'fuchsia');
  });
  $('#btn3').on('click', function() {
    var $a = $('.testtable2 tr').get(-1);
    $($a).css('backgroundColor', 'red');
  });
});

Press the button below to action the above code:

          

Related Tutorials

jQuery Basic Tutorials - Lesson 5 - DOM Element Methods