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;