jQuery: eq () vs 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

Можливий дублікат Чому різниця між 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)^{(документи)} повертає перший елемент DOM у наборі, загорнутий у об’єкт jQuery.

Ось чому .fadeIn("slow");не працює, коли ти робиш .get(0). Елемент DOM не має fadeIn()методу, але об’єкт jQuery.

— користувач113716
джерело

6

На основі інших відповідей:

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

— qwertymk
джерело

1

Перший - правильний. Другий - це не те, що два об'єкти не однакові

— Рой Намір

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

Якщо ви не передасте аргумент .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;
```

— SkuraZZ
джерело