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");
Ответы
Ответ 1
.get()
и .eq()
возвращают один "элемент" из массива объектов jQuery, но возвращают один элемент в разных формах.
.eq()
возвращает его как объект jQuery, то есть элемент DOM обернут в оболочку jQuery, что означает, что он принимает функции jQuery.
.get()
возвращает массив необработанных элементов DOM. Вы можете манипулировать каждым из них, обращаясь к его атрибутам и вызывая его функции так же, как и на необработанном элементе DOM. Но он теряет свою идентичность как объект, обернутый jQuery, поэтому функция jQuery, такая как .fadeIn
, не будет работать.
Ответ 2
get()
возвращает элемент DOM, тогда как :eq()
и eq()
возвращают элемент jQuery. Поскольку элементы DOM не имеют метода fadeIn()
, он терпит неудачу.
http://api.jquery.com/get/
Описание: Получить элементы DOM, соответствующие объекту jQuery.
http://api.jquery.com/eq-selector/
Описание: Выберите элемент с индексом n в согласованном наборе.
Ответ 3
get(0)
(docs) возвращает первый элемент DOM в наборе.
eq(0)
(docs) возвращает первый элемент DOM в наборе, завернутый в объект jQuery.
Вот почему .fadeIn("slow");
не работает, когда вы делаете .get(0)
. Элемент DOM не имеет метода fadeIn()
, но объект jQuery делает.
Ответ 4
Чтобы опираться на другие ответы:
$('h2').get(0) === $('h2').eq(0)[0] //true
$( $('h2').get(0) ) === $('h2').eq(0) //true
Ответ 5
eq(i)
извлекает i-й член в приемнике, установленном как объект jQuery
, а get(i)
возвращает элемент в i-й позиции как элемент DOM.
Причина, по которой это не работает:
$("h2").get(0).fadeIn("slow");
Это потому, что элемент h2
DOM не имеет метода под названием fadeIn
.
Вместо этого вы должны использовать eq(0)
.
Ответ 6
Я приводил пример, который объясняет точки, данные другими здесь.
рассмотрим следующий код
<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
Ответ 7
Метод 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
Ответ 8
Ответы выше объяснили четко и правильно. Я хочу добавить несколько пунктов здесь, которые могут помочь в использовании get()
.
-
Если вы не передадите аргумент .get()
, он вернет массив из элементов DOM.
-
Если у вас есть объект DOM с помощью get()
, например
var s = $("#id").get(0)
вы можете вернуть его обратно в объект jQuery, просто используя это, $(s)
-
Вы можете использовать $obj[i]
как альтернативный способ, если вы не хотите использовать $obj.get(i)
, см. ниже,
var $obj = $("#ul li");
var obj1 = $obj.get(1);
var obj2 = $obj[1];
//true
return obj2===obj1;