JQuery: eq() vs get()

我是 jQuery 的新手，我想知道 jQuery 的 get()和 eq()函数之间有什么不同。我可能误解了 get()函数的作用，但是我觉得奇怪的是，我不能在同一行中返回的元素上调用返回的函数。

//Doesn't work
I.e.  $("h2").get(0).fadeIn("slow");


//Works
$("h2").eq(0).fadeIn("slow");
50062 次浏览
小开

get() returns a DOM element whereas :eq() and eq() return a jQuery element. Since DOM elements have no method fadeIn() it fails.

http://api.jquery.com/get/

Description: Retrieve the DOM elements matched by the jQuery object.

http://api.jquery.com/eq-selector/

Description: Select the element at index n within the matched set.

小开

eq(i) retrieves the ith member in the receiver's set as a jQuery object, while get(i) returns the member at the ith position as a DOM element.

The reason why this doesn't work:

$("h2").get(0).fadeIn("slow");

Is because the h2 DOM element doesn't have a method called fadeIn.

You should use eq(0) here instead.

小开

get(0)(docs) returns the first DOM element in the set.

eq(0)(docs) returns the first DOM element in the set, wrapped in a jQuery object.

That's why .fadeIn("slow"); doesn't work when you do .get(0). A DOM element doesn't have a fadeIn() method, but a jQuery object does.

小开
最佳答案

.get() and .eq() both return a single "element" from a jQuery object array, but they return the single element in different forms.

.eq() returns it as a jQuery object, meaning the DOM element is wrapped in the jQuery wrapper, which means that it accepts jQuery functions.

.get() returns an array of raw DOM elements. You may manipulate each of them by accessing its attributes and invoking its functions as you would on a raw DOM element. But it loses its identity as a jQuery-wrapped object, so a jQuery function like .fadeIn won't work.

小开

To build on the other answers:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true
小开

I am giving an example that explains the points given by others here. consider the following code

<div id="example">
Some text
<div>Another div</div>
<!--A comment-->
</div>

and the corresponding js code,

$(document).ready(function() {
var div = $("#example").get(0);
console.log(typeof(div));
console.log(div);
console.log("XXXXXXXXX");
var div_eq=$('#example').eq(0);
console.log(typeof(div_eq));
console.log(div_eq);
});

This is what you will see

 object
excercise1.js (line 5)
<div id="example">
excercise1.js (line 6)
XXXXXXXXX
excercise1.js (line 7)
object
excercise1.js (line 9)
Object[div#example]

The first is a DOM object while the latter is a Jquery-wrapped object where you could call Jquery methods

小开

jQuery eq() method selects a HTML element with a specific index number.

Here is an example of that

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>


$( "body" ).find( "div" ).eq( 2 ).addClass( "red" );
// it finds the second div in the html body and change it to red color.

Source: http://www.snoopcode.com/JQuery/jquery-eq-selector

小开

Answers above have explained specificly and correctly. I want to add a few points here that might help for the use of get().

  1. If you don't pass an argument to .get(), it will return an Array of the DOM elements.

  2. If you got a DOM object using get(), like var s = $("#id").get(0) you can turn it back into jQuery object simply by using this, $(s)

  3. You can use $obj[i] as an alternative way if you don't want to use $obj.get(i), see below,

    var $obj = $("#ul li");
var obj1 = $obj.get(1);
var obj2 = $obj[1];


//true
return obj2===obj1;

提交答案