jQuery : eq() 与 get()答案

【问题标题】：jQuery : eq() vs get()jQuery : eq() 与 get()
【发布时间】：2011-06-10 05:27:54
【问题描述】：

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

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

//Works
$("h2").eq(0).fadeIn("slow");

【问题讨论】：

difference between get() and eq() in jquery的可能重复
What is difference between get() and eq() in jquery?的可能重复

标签： jquery jquery-selectors

【解决方案1】：

上面的答案已经具体正确地解释了。我想在这里补充几点可能有助于get()的使用。

如果您不将参数传递给 .get()，它将返回一个 DOM 元素的数组。
如果你有一个使用 get() 的 DOM 对象，比如 var s = $("#id").get(0) 你可以简单地用这个$(s)

如果您不想使用$obj.get(i)，可以使用$obj[i] 作为替代方式，见下文，

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

//true
return obj2===obj1;

【讨论】：

【解决方案2】：

.get() 和 .eq() 都从 jQuery 对象数组返回单个“元素”，但它们以不同的形式返回单个元素。

.eq() 将其作为 jQuery 对象返回，这意味着 DOM 元素被包装在 jQuery 包装器中，这意味着它接受 jQuery 函数。

.get() 返回原始 DOM 元素的数组。您可以通过访问其属性并调用其函数来操作它们中的每一个，就像在原始 DOM 元素上一样。但它失去了作为 jQuery 包装对象的身份，因此像 .fadeIn 这样的 jQuery 函数将无法工作。

【讨论】：

.get() 返回一个数组，.get(index) 返回数组中索引处的单个元素。

【解决方案3】：

jQuery eq() 方法选择具有特定索引号的 HTML 元素。

这是一个例子

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

来源：http://www.snoopcode.com/JQuery/jquery-eq-selector

【讨论】：

"找到第二个 div" => eq(2) 不返回第三个 div？

【解决方案4】：

get() 返回一个 DOM 元素，而 :eq() 和 eq() 返回一个 jQuery 元素。由于 DOM 元素没有方法 fadeIn() 它失败。

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

说明： 检索 jQuery 对象匹配的 DOM 元素。

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

说明：在匹配集中选择索引n处的元素。

【讨论】：

【解决方案5】：

我举一个例子来解释其他人在这里给出的观点。考虑以下代码

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

以及对应的js代码，

$(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);
    });

这就是你将看到的

 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]

第一个是 DOM 对象，而后者是 Jquery 包装的对象，您可以在其中调用 Jquery 方法

【讨论】：

【解决方案6】：

以其他答案为基础：

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

【讨论】：

第一个是正确的。第二个不是。这两个对象不一样

【解决方案7】：

get(0)^(docs) 返回集合中的第一个 DOM 元素。

eq(0)^(docs) 返回集合中的第一个 DOM 元素，包装在一个 jQuery 对象中。

这就是为什么 .fadeIn("slow"); 在您执行 .get(0) 时不起作用的原因。 DOM 元素没有 fadeIn() 方法，但 jQuery 对象有。

【讨论】：

【解决方案8】：

eq(i) 将接收者集合中的第 i 个成员作为 jQuery 对象检索，而 get(i) 将第 i 个位置的成员作为 DOM 元素返回。

这不起作用的原因：

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

是因为h2 DOM 元素没有名为fadeIn 的方法。

你应该在这里使用eq(0)。

【讨论】：