jQuery: eq () против get ()

98

Я новичок в jQuery, и мне интересно, в чем разница между jQuery get()и eq()функциями. Я могу неправильно понять, что get()делает функция, но мне показалось странным, что я не могу вызвать функцию для возвращаемого элемента в той же строке.

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

//Works
$("h2").eq(0).fadeIn("slow");
jquery jquery-selectors контакты
источник
1
возможный дубликат разницы между get () и eq () в jquery
PeeHaa 02
Возможный дубликат в чем разница между get () и eq () в jquery?
xhienne

Ответы:

194

.get()и .eq()оба возвращают один «элемент» из массива объектов jQuery, но они возвращают один элемент в разных формах.

.eq() возвращает его как объект jQuery, что означает, что элемент DOM заключен в оболочку jQuery, что означает, что он принимает функции jQuery.

.get()возвращает массив необработанных элементов DOM. Вы можете управлять каждым из них, обращаясь к его атрибутам и вызывая его функции, как если бы вы использовали необработанный элемент DOM. Но он теряет свою идентичность как объект, завернутый в jQuery, поэтому функция jQuery вроде .fadeInне будет работать.

Стивен
источник
8
.get () возвращает массив, .get (index) возвращает единственный элемент по индексу из массива.
Мохамед Фасил
16

get()возвращает элемент DOM, тогда как :eq()и eq()возвращает элемент jQuery. Поскольку элементы DOM не имеют метода, fadeIn()он не работает .

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

Описание: получение элементов DOM, соответствующих объекту jQuery.

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

Описание: выберите элемент с индексом n в согласованном наборе.

охотник
источник
12

get(0)(docs) возвращает первый элемент DOM в наборе.

eq(0)(docs) возвращает первый элемент DOM в наборе, заключенный в объект jQuery.

Вот почему .fadeIn("slow");не работает, когда вы делаете .get(0). У элемента DOM нет fadeIn()метода, но у объекта jQuery есть.

user113716
источник
6

Чтобы опираться на другие ответы:

$('h2').get(0) === $('h2').eq(0)[0]  //true
$( $('h2').get(0) ) === $('h2').eq(0)  //true
qwertymk
источник
1
Первый правильный. Второй - нет. Эти 2 объекта не совпадают
Рой Намир
5

eq(i)извлекает i-й член в наборе получателя как jQueryобъект, аget(i) возвращает член в i-й позиции как элемент DOM.

Причина, по которой это не работает:

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

Это потому, что h2элемент DOM не имеет метода с именемfadeIn .

eq(0)Вместо этого вы должны использовать здесь.

Яков Релкин
источник
0

Я привожу пример, объясняющий пункты, высказанные здесь другими. рассмотрим следующий код

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

мозговой штурм
источник
0

Метод 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?
xhienne
0

Ответы выше объяснены конкретно и правильно. Я хочу добавить сюда несколько моментов, которые могут помочь при использовании get().

  1. Если вы не передадите аргумент .get(), он вернет массив элементов DOM.

  2. Если у вас есть объект DOM с использованием get(), например, var s = $("#id").get(0) вы можете превратить его обратно в объект jQuery, просто используя это,$(s)

  3. Вы можете использовать $obj[i]как альтернативный способ, если не хотите использовать $obj.get(i), см. Ниже,

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

//true
return obj2===obj1;
SkuraZZ
источник