jQuery - tương đương với mỗi(), nhưng đối với một yếu tố duy nhất

Question

tương đương với jQuery cho mỗi() là gì:

$(".element").each(function(){ 
    // do stuff 
}); 

khi gắn một chức năng để một yếu tố duy nhất, như #element?

Answer 1

Bạn luôn có thể tham khảo các đối tượng jQuery trong một biến:

var $el = $('#element'); 

... sau đó vận dụng nó.

$el.doSomething();   // call some jQuery methods from the cached object 
$el.doSomethingElse(); 

Nếu lý do bạn muốn .each() là để tham khảo các phần tử DOM như this, bạn không thực sự cần từ khóa this để làm điều đó, bạn chỉ có thể lấy các phần tử DOM ra khỏi đối tượng jQuery.

var element = $('#element')[0];  // both of these give you the DOM element 
var element = $('#element').get(0); //  at index 0 

Hai trong số này là tương đương, và sẽ lấy phần tử DOM sẽ được tham chiếu như this trong .each().

alert(element.tagName); // alert the tagName property of the DOM element 
alert(element.id);  // alert the ID property of the DOM element 

---

tôi muốn lưu ý rằng nó không hẳn là xấu để sử dụng mỗi để lặp qua một yếu tố duy nhất.

Lợi ích là bạn có quyền truy cập dễ dàng vào phần tử DOM và bạn có thể làm như vậy trong phạm vi mới để bạn không làm lộn xộn không gian tên xung quanh bằng các biến.

Có nhiều cách khác để thực hiện việc này. Hãy ví dụ này:

(function($) { 

    // Inside here, "this" will refer to the DOM element, 
    // and the "$" parameter, will reference the jQuery library. 

    alert(this.tagName); 

    // Any variables you create inside will not pollute the surrounding 
    //  namespace. 

    var someVariable = 'somevalue'; // is local to this function 

}).call($('#element')[0], jQuery); 

Answer 2

Để trực tiếp trả lời câu hỏi của bạn, .each() hoạt động bình thường trên bộ yếu tố của bất kỳ kích thước bao gồm 1.

Bạn cũng có thể bỏ qua các .each() cuộc gọi hoàn toàn và chỉ cần gọi phương pháp jQuery trên $('#element'). Hãy nhớ rằng bạn có thể chuỗi nhất nếu không phải tất cả các cuộc gọi phương thức jQuery khi chúng trả về đối tượng jQuery. Điều này thậm chí làm việc trên nhiều yếu tố cho vấn đề, tùy thuộc vào những gì các phương pháp làm.

$('#element').doSomething().doSomethingElse(); 

Nếu bạn cần phải tham khảo các đối tượng nhiều lần, làm cho một biến:

var $elm = $('#element'); 
$elm.doSomething(); 
doSomethingElse($elm); 

Answer 3

Nếu chỉ có 1 phần tử, bạn có thể truy cập vào nó thường sử dụng bộ chọn.

$('#your_element').your_event(function() { 

}); 

Answer 4

Bạn có nghĩa là giống như $ ('# yếu tố'). Trẻ em(). Each() giả bạn có một cái gì đó giống như một ul với một id và bạn muốn li mỗi bên trong nó?

Answer 5

Sử dụng first().

each() khớp với tất cả các thành phần, trong khi first() chỉ khớp với phần tử đầu tiên.

Có các bộ chọn khác nữa. Khi bạn sử dụng id trong bộ chọn, bạn sẽ chỉ nhận được một phần tử. Đây là sự khác biệt chính giữa .element và #element. Đầu tiên là một lớp có thể được gán cho nhiều phần tử, trong khi thứ hai là một id chỉ thuộc về một phần tử.

Bạn vẫn có thể sử dụng mỗi nếu chỉ có một (hoặc 0) phần tử được trả lại. Ngoài ra, bạn có thể bỏ qua tất cả nếu bạn muốn liên kết một sự kiện. Bạn sử dụng each khi bạn muốn thực thi một hàm cụ thể cho mỗi phần tử trong danh sách các phần tử.

Answer 6

Đằng sau hậu trường, each chỉ là một vòng lặp for đó lặp qua mỗi phần tử trong map trả về bởi jQuery.

Về bản chất, nó là ^{& dagger;} giống như:

var i, map = $('...selector...'); 
for (i = 0; i < map.length; i++) 
{ 
    someFunction(i, map[i]); 
} 

& dagger; Có nhiều điều hơn thế, liên quan đến việc gọi hàm trong ngữ cảnh của phần tử bản đồ, v.v.

Việc triển khai thực hiện một cách thuận tiện để gọi hàm trên phần tử each trong phần lựa chọn.