Review: jQuery collections & looping

Bộ sưu tập jQuery

Khi bạn sử dụng jQuery để tìm các phần tử, jQuery trả về một đối tượng bộ sưu tập jQuery:

var $heading = $('h1');

Đó là thực tế phổ biến để bắt đầu các tên biến như thế bằng một $dấu hiệu để cho thấy rằng họ đang lưu trữ các đối tượng bộ sưu tập jQuery. Điều đó giúp phân biệt chúng với các biến lưu trữ các nút DOM.

Nếu bạn muốn lấy nút DOM ra khỏi một đối tượng jQuery, thì bạn có thể coi đối tượng jQuery như một mảng và sử dụng ký hiệu ngoặc:

var heading = $heading[0];

Nếu bạn muốn biến một nút DOM thành một đối tượng jQuery, bạn có thể chuyển nó vào hàm jQuery:

var $heading = $(heading);

Vòng qua các bộ sưu tập

Nếu bạn muốn lặp qua nhiều phần tử trong bộ sưu tập, bạn có thể sử dụng forvòng lặp thông thường hoặc jQuery each():

    $("p").each(function(index, element) { 
        $(element).text( $(element).text() + "!!"); 
    });

Khi bạn gọi each()hàm, bạn phải truyền 'hàm gọi lại' cho nó. Sau đó, jQuery sẽ gọi hàm gọi lại đó cho từng phần tử trong bộ sưu tập và nó sẽ chuyển chỉ mục và phần tử hiện tại cho hàm.

jQuery cũng sẽ đặt bối cảnh của hàm thành phần tử hiện tại, có nghĩa là bạn có thể tham chiếu phần tử với thistừ khóa:

    $("p").each(function() { 
        $(this).text( $(this).text() + "!!"); 
    });