OpenJS Foundation - openjsf.org ยท api.jquery.com

Retrieve the DOM elements matched by the jQuery object.

.get( index )Returns: Element

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

  • version added: 1.0.get( index )

    • index

      A zero-based integer indicating which element to retrieve.

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-4.0.0.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 ).on( "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:

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

Read the original on api.jquery.com โ†—