Retrieve the DOM elements matched by the jQuery object.

Contents:

.get( index )Returns: Element

Description: Retrieve one of the elements matched by the jQuery object.

The .get() method grants access to the DOM nodes underlying each jQuery object. If the value of index is out of bounds — less than the negative number of elements or equal to or greater than the number of elements — it returns undefined. Consider a simple unordered list:

1
2
3
4
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

With an index specified, .get( index ) retrieves a single element:

1
 
console.log( $( "li" ).get( 0 ) );

Since the index is zero-based, the first list item is returned:

<li id="foo">

Each jQuery object also masquerades as an array, so we can use the array dereferencing operator to get at the list item instead:

1
 
console.log( $( "li" )[ 0 ] );

However, this syntax lacks some of the additional capabilities of .get(), such as specifying a negative index:

1
 
console.log( $( "li" ).get( -1 ) );

A negative index is counted from the end of the matched set, so this example returns the last item in the list:

<li id="bar">

Example:

Display the tag name of the click element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>get demo</title>
  <style>
  span {
    color: red;
  }
  div {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<span>&nbsp;</span>
<p>In this paragraph is an <span>important</span> section</p>
<div><input type="text"></div>
 
<script>
$( "*", document.body ).click(function( event ) {
  event.stopPropagation();
  var domElement = $( this ).get( 0 );
  $( "span:first" ).text( "Clicked on - " + domElement.nodeName );
});
</script>
 
</body>
</html>

Demo:

.get()Returns: Array

Description: Retrieve the elements matched by the jQuery object.

Consider a simple unordered list:

1
2
3
4
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

Without a parameter, .get() returns an array of all of the elements:

1
 
console.log( $( "li" ).get() );

All of the matched DOM nodes are returned by this call, contained in a standard array:

[<li id="foo">, <li id="bar">]

Example:

Select all divs in the document and return the DOM Elements as an Array; then use the built-in reverse() method to reverse that array.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>get demo</title>
  <style>
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
Reversed - <span></span>
 
<div>One</div>
<div>Two</div>
<div>Three</div>
 
<script>
function display( divs ) {
  var a = [];
  for ( var i = 0; i < divs.length; i++ ) {
    a.push( divs[ i ].innerHTML );
  }
  $( "span" ).text( a.join(" ") );
}
display( $( "div" ).get().reverse() );
</script>
 
</body>
</html>

Demo: