Xác định jQuery "eq"

Question

Tôi đang gặp khó khăn khi gói đầu quanh một số jQuery eq. Ai đó có thể giải thích việc sử dụng nó cho tôi không? Cái gì và nó chỉ mục như thế nào?

cảm ơn.

Answer 1

Với HTML này:

<ul> 
    <li>Mario</li> 
    <li>Luigi</li> 
    <li>Princess</li> 
    <li>Toad</li> 
</ul> 

Và JavaScript này:

alert($("ul li").eq(0).text()); // Mario 
alert($("ul li").eq(1).text()); // Luigi 
alert($("ul li").eq(2).text()); // Princess 
alert($("ul li").eq(3).text()); // Toad 

Answer 2

.eq(i) trả về một phần tử từ một bộ sưu tập tại một chỉ số quy định i.

Trong ví dụ từ các liên kết mà bạn đã đăng:

$("p").eq(1).css("color", "red")

Nó về cơ bản nói: "Tìm tất cả các yếu tố phù hợp với $ (" p ") sau đó lấy một thứ 2 và thay đổi màu sắc của nó thành màu đỏ. "

$("p") khớp với tất cả <p> yếu tố trong tài liệu của bạn. Bây giờ bạn có một bộ sưu tập của những người.

$("p").eq(1) chỉ thu thập bộ sưu tập này thành phần tử thứ 2.

phần .css("color", "red") chỉ hoạt động trên phần tử đó để thay đổi màu thành màu đỏ.

Answer 3

có một cái nhìn vào ví dụ từ tài liệu:

$("p").eq(1).css("color", "red") 

$("p")    selects all paragraphs in your document 
.eq(1)    selects the second element only 
.css("color", "red") applies css rule to the selected element 

Answer 4

Có vẻ như bạn có thể nhận được đánh bắt lên từ 'index'.

Trong trường hợp này, 'chỉ mục' đề cập đến một mục cụ thể trong một tập hợp các mục. Vì vậy, eq sẽ cấp cho bạn quyền truy cập vào một mục duy nhất trong tập hợp các phần tử phù hợp.

Answer 5

Để hiểu cách hoạt động của eq(), tôi nghĩ rằng điều này giúp hiểu cách hoạt động của jQuery trong $(). Khi bạn xác định

$([selector],[context]) 

//which is the same as 

$([context]).find([selector]) 

những gì được trở lại là một jQuery đối tượng (đôi khi được gọi là một bọc thiết) mà, trong số các tài sản khác, có một tài sản bắt đầu với 0 và incrementing bởi 1 cho mỗi phần tử khớp với công cụ chọn. Một thuộc tính length cũng được thiết lập, đó là lý do tại sao các phần tử phù hợp của một đối tượng jQuery có thể được lặp lại như một mảng (sử dụng vòng lặp for hoặc các lệnh như each([callback])).

Bây giờ hãy có một cái nhìn tại nguồn cho eq()

eq: function(i) { 
    return this.slice(i, +i + 1); 
}, 

chúng ta thấy rằng eq() được thực hiện bằng cách sử dụng lệnh slice() của đối tượng jQuery, vì vậy chúng ta hãy cũng có một cái nhìn lúc đó

slice: function() { 
    return this.pushStack(Array.prototype.slice.apply(this, arguments), 
    "slice", Array.prototype.slice.call(arguments).join(",")); 
}, 

và cũng cần phải xem pushStack(), lệnh được sử dụng khá nội bộ

// Take an array of elements and push it onto the stack 
// (returning the new matched element set) 
pushStack: function(elems, name, selector) { 
    // Build a new jQuery matched element set 
    var ret = jQuery(elems); 

    // Add the old object onto the stack (as a reference) 
    ret.prevObject = this; 

    ret.context = this.context; 

    if (name === "find") 
    ret.selector = this.selector + (this.selector ? " " : "") + selector; 
    else if (name) 
    ret.selector = this.selector + "." + name + "(" + selector + ")"; 

    // Return the newly-formed element set 
    return ret; 
}, 

chúng ta có thể thấy rằng pushStack lấy một mảng và trả về một đối tượng jQuery mới. Các phần tử tạo thành các phần tử phù hợp của đối tượng jQuery mới thu được bằng cách gọi Function.apply trên hàm JavaScript Array slice và truyền hàm arguments của hàm slice jQuery ở dạng argsArray.

Mặt khác, lệnh get() đơn giản hơn. Chúng ta hãy có một cái nhìn tại nguồn

// Get the Nth element in the matched element set OR 
// Get the whole matched element set as a clean array 
get: function(num) { 
    return num === undefined ? 

    // Return a 'clean' array 
    Array.prototype.slice.call(this) : 

    // Return just the object 
    this[ num ]; 
} 

gọi mà không cần một cuộc tranh cãi cho tham số num, đối tượng jQuery được chuyển thành một mảng, sử dụng Function.call trên JavaScript Mảng slice chức năng. Nếu num được xác định, thì giá trị được tổ chức tại các sở hữu tương ứng của đối tượng jQuery được trả lại, cũng tương tự như sau

$([selector]).get(0) 

//is the same as 

$([selector])[0]