jquery each là gì? cùng tìm hiểu về method each() trong jquery

jQuery each() là gì?

Method each() của jQuery dùng để lặp qua từng phần tử DOM.

Syntax:

$(selector).each(function(index, element))

each() chấp nhận một hàm làm tham số. Đây là một hàm callback() sẽ thực thi với mỗi phần tử trong vòng lặp. Hàm callback() có hai tham số là index và element.

Để dừng vòng lặp ta có thể return false từ hàm callback. Ngoài ra, chúng ta có thể sử dụng từ khóa this để tham chiếu đến element hiện tại.

Ví dụ

Để hiểu rõ hơn thì chúng ta cùng đến với một vài ví dụ nhé:

Giả sử mình có danh sách các thẻ <li>. Bây giờ mình muốn lấy <li> thứ 2 và style cho nó.

<ul>  
  <li> First element </li>  
  <li> Second element </li>  
  <li> Third element </li>  
  <li> Fourth element </li>  
</ul>  

Chúng ta sẽ làm như sau:

$('li').each(function (index) {
  if (index == 1) { // phần tử đầu tiên - index 0
    $(this).css('color', 'red'); // this tương ứng phần tử hiện tại
    return false; // dừng vòng lặp
  }
});

Ví dụ trên chúng ta sử dụng theo kiểu thông thường $(selector).each(), ở ví dụ tiếp theo ta sẽ thử dùng each() để lặp qua các property của một object, bằng cách sử dụng utility function có cú pháp như sau:

$.each(collection: object|array, callback: (indexInArray: any, valueOfElement: any)

const person = {
  name: 'Phong',
  age: '22',
  girl_friend: 0,
};

$.each(person, function (key, value) {
  if (key == 'girl_friend' && value === 0) console.log('so sad 🥴');
});

Các bạn lưu ý để sử dụng đúng method each(): $.each() và $(selector).each() là hai phương thức khác nhau và chúng được định nghĩa theo hai cách khác nhau.

Kết luận

Hi vọng qua bài viết này các bạn có thể hiểu hơn về method each(). Chúng ta sẽ gặp lại nhau trong các bài viết khác ^^. Chúc các bạn học tốt.