jQuery: eq () vs get ()

98

Tôi mới sử dụng jQuery và tôi đang tự hỏi sự khác biệt giữa jQuery get()và các eq()hàm. Tôi có thể hiểu sai get()chức năng đó làm gì, nhưng tôi nghĩ thật kỳ lạ khi tôi không thể gọi một hàm trên phần tử được trả về trên cùng một dòng.

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

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

jquery jquery-selectors

— contactmatt
nguồn

1

có thể trùng lặp của sự khác biệt giữa get () và eq () trong jquery

— PeeHaa

Có thể trùng lặp của Sự khác biệt giữa get () và eq () trong jquery là gì?

— xhienne

194

.get()và .eq()cả hai đều trả về một "phần tử" duy nhất từ mảng đối tượng jQuery, nhưng chúng trả về phần tử đơn ở các dạng khác nhau.

.eq() trả về nó dưới dạng một đối tượng jQuery, nghĩa là phần tử DOM được bao bọc trong trình bao bọc jQuery, có nghĩa là nó chấp nhận các hàm jQuery.

.get()trả về một mảng các phần tử DOM thô. Bạn có thể thao tác từng người trong số chúng bằng cách truy cập các thuộc tính của nó và gọi các chức năng của nó như bạn làm trên một phần tử DOM thô. Nhưng nó mất danh tính là một đối tượng được bao bọc bởi jQuery, vì vậy một hàm jQuery như .fadeInsẽ không hoạt động.

— Steven
nguồn

8

.get () trả về một mảng, .get (index) trả về một phần tử duy nhất tại chỉ mục từ mảng.

— Mohamed Fasil

16

get()trả về một phần tử DOM trong khi :eq()và eq()trả về một yếu tố jQuery. Vì các phần tử DOM không có phương thức fadeIn()nên nó không thành công .

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

Mô tả: Lấy các phần tử DOM được đối tượng jQuery so khớp.

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

Mô tả: Chọn phần tử ở chỉ mục n trong tập hợp đã so khớp.

— thợ săn
nguồn

12

get(0)^(docs) trả về phần tử DOM đầu tiên trong tập hợp.

eq(0)^(docs) trả về phần tử DOM đầu tiên trong tập hợp, được bao bọc trong một đối tượng jQuery.

Đó là lý do tại sao .fadeIn("slow");không hoạt động khi bạn làm .get(0). Phần tử DOM không có fadeIn()phương thức, nhưng đối tượng jQuery thì có.

— người dùng113716
nguồn

6

Để xây dựng các câu trả lời khác:

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

— qwertymk
nguồn

1

Đầu tiên là chính xác. Thứ hai thì không. 2 đối tượng này không giống nhau

— Royi Namir

5

eq(i)truy xuất thành viên thứ i trong tập hợp của người nhận làm jQueryđối tượng, trong khi get(i)trả về thành viên ở vị trí thứ i dưới dạng phần tử DOM.

Lý do tại sao điều này không hoạt động:

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

Là bởi vì h2phần tử DOM không có một phương thức được gọi fadeIn.

Bạn nên sử dụng eq(0)ở đây để thay thế.

— Jacob Relkin
nguồn

0

Tôi đang đưa ra một ví dụ giải thích những điểm được đưa ra bởi những người khác ở đây. xem xét đoạn mã sau

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

và mã js tương ứng,

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

Đây là những gì bạn sẽ thấy

 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]

Đầu tiên là một đối tượng DOM trong khi cái sau là một đối tượng được bọc bằng Jquery, nơi bạn có thể gọi các phương thức Jquery

— động não
nguồn

0

Phương thức jQuery eq () chọn một phần tử HTML với một số chỉ mục cụ thể.

Đây là một ví dụ về điều đó

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

Nguồn: http://www.snoopcode.com/JQuery/jquery-eq-selector

— Prabhakar Undurthi
nguồn

"nó tìm thấy div thứ hai" => không eq(2)trả về div thứ ba?

— xhienne

0

Các câu trả lời trên đã giải thích cụ thể và chính xác. Tôi muốn thêm một vài điểm ở đây có thể giúp ích cho việc sử dụng get().

Nếu bạn không chuyển một đối số tới .get(), nó sẽ trả về một Mảng gồm các phần tử DOM.
Nếu bạn có một đối tượng DOM đang sử dụng get(), chẳng hạn như var s = $("#id").get(0) bạn có thể biến nó trở lại thành đối tượng jQuery đơn giản bằng cách sử dụng điều này,$(s)
Bạn có thể sử dụng $obj[i]như một cách thay thế nếu bạn không muốn sử dụng $obj.get(i), hãy xem bên dưới,
```
var $obj = $("#ul li");
var obj1 = $obj.get(1);
var obj2 = $obj[1];

//true
return obj2===obj1;
```

— SkuraZZ
nguồn