.get()
Retrieve one of the elements matched by the jQuery object. Retrieve the elements matched by the jQuery object.
.get(index)🡢 Element
index
| Integer | 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:
<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">
Display the tag name of the click element.
<span> </span>
<p>In this paragraph is an <span>important</span> section</p>
<div><input type="text" /></div>
span {
color: red;
}
div {
background: yellow;
}
$("*", document.body).click(function (event) {
event.stopPropagation();
var domElement = $(this).get(0);
$("span")
.first()
.text("Clicked on - " + domElement.nodeName);
});
.get()🡢 Array
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">]
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.
Reversed - <span></span>
<div>One</div>
<div>Two</div>
<div>Three</div>
span {
color: red;
}
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());