.get()

.get()

Retrieve the DOM elements matched by the jQuery object.

.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:

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

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

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:

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

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

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.

<!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" rel="external nofollow"  rel="external nofollow" ></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.

  • version added: 1.0.get()

    • This method does not accept any arguments.

Consider a simple unordered list:

<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
</ul>

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

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.

<!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" rel="external nofollow"  rel="external nofollow" ></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:

© The jQuery Foundation and other contributors
Licensed under the MIT License.
https://api.jquery.com/get

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部