Looping with the each() method

Lặp lại dữ liệu thông qua vòng lặp là quan trọng trong lập trình - và trong JavaScript cũng vậy, bao gồm for và while. Tuy nhiên, trong các ngôn ngữ lập trình hiện nay thì cũng có cả foreach. Dùng foreach dễ dàng hơn và rất hữu ích cho danh sách các đối tượng.

Không may, JavaScript không có vòng lặp foreach, vì vậy khi bạn dùng JavaScript chúng ta dùng vong lặp for() như sau:

<script type="text/javascript">
var arrayOfUsers = 
[
    { Id: 1, Name: "John Doe" },
    { Id: 2, Name: "Jane Doe" },
    { Id: 3, Name: "Joe Doe" }
];

for(var i = 0; i < arrayOfUsers.length; i++)
{ 
    var user = arrayOfUsers[i];
    document.write("User #" + user.Id + ": " + user.Name + "<br>");
}
</script>

Giải thích ngắn gọn: Chúng ta định nghĩa các đối tượng người dùng và chúng ta lặp qua chúng thông qua vòng lặp for(). Trong mỗi vòng lặm, chúng ta đưa người dùng từ mảng với chỉ mục (gọi là i) và sau đó chúng ta chỉ in giá trị ra màn hình. Vòng lặp for hơi dài dòng như bạn thấy - chúng ta định nghĩa chỉ mục, xác định điều kiện cho vòng lặp và tăng chỉ mục cho mỗi vòng lặp.

Rất may cho chúng ta, jQuery sẽ giúp chúng ta thực hiện vòng lặp foreach. Chúng không hoàn toàn giống foreach như bạn thấy trong nhiều ngôn ngữ lập trình khác. Hãy để tôi minh họa ví dụ đơn giản sau:

<script type="text/javascript">
var arrayOfUsers = 
[
    { Id: 1, Name: "John Doe" },
    { Id: 2, Name: "Jane Doe" },
    { Id: 3, Name: "Joe Doe" }
];

$.each(arrayOfUsers, function(i, user)
{
    document.write("User #" + user.Id + ": " + user.Name + "<br>");
});
</script>

Một lần nữa, chúng ta định nghĩa mảng người dùng nhưng sau đó dùng phương thức each() trong jQuery để lặp lại dữ liệu. Nó hoạt động bằng cách xác định (ít nhất) hai tham số: Một mảng hay một đối tượng để lặp trong đó chúng ta có thể dùng (nếu ta muốn): chỉ mục hiện tại của các thành phần và chính thành phần đó. Trong trường hợp này, chúng ta gọi hai tham số i và user, nhưng bạn có thể đặt tên tham số phù hợp. Trong trường hợp này, chúng ta không nhất thiết cần chỉ múc nhưng cần thành phần hiện tại (user), chúng ta dùng như ví dụ trên: In dữ liệu về người dùng.

Using break and continue with the each() loop

A core piece of functionality in a regular loop is the ability to skip to the next iteration (using the continue keyword) or leaving the loop entirely using the break keyword. This can be done for the each() loop too, but since this is a special construct created by jQuery and not an actual loop, it's done in a slightly different way. Let's see another example:

<script type="text/javascript">
var arrayOfUsers = 
[
    { Id: 1, Name: "John Doe" },
    { Id: 2, Name: "Jane Doe" },
    { Id: 3, Name: "Joe Doe" }
];

$.each(arrayOfUsers, function(i, user)
{
    if(user.Id == 1)
        return true; // Continue
    if(user.Id == 3)
        return false; // Break
    document.write("User #" + user.Id + ": " + user.Name + "<br>");
});
</script>

Chúng ta dùng dữ liệu chính xác như trước, nhưng chúng ta sẽ đưa vào một số lựa chọn - nếu người dùng có Id là 1 thì chúng ta sẽ chuyển sang vòng tiếp theo và nếu Id bằng 3 thì chúng ta sẽ thoát ra khỏi vòng lặp. Chúng ta có thể làm bằng cách dùng continue và break nhưng vì chúng ta đang thực hiện trong một hàm nên chúng ta dùng từ khóa return. Để tiếp tục chúng ta trả về true và để thoát ta trả về false. jQuery sau đó dịch sang continue hay break.

Looping over DOM elements

Chúng ta chỉ cần dùng hàm static each(), cho ta truy cập vào từng vòng lặp với mảng JavaScript hay các thuộc tính của đối tượng. Tuy nhiên, jQuery cũng có hàm each() không phải là static dùng cho các thành phần DOM. Hãy cùng xem ví dụ:

<ul>
    <li>John Doe</li>
    <li>Jane Doe</li>
    <li>Joe Doe</li>
</ul>

<script type="text/javascript">
$(function()
{
    $("li").each(function(index, listElement)
    {
        $(listElement).append(" is number " + (index + 1));
    });
});
</script>

Chúng ta có một danh sách không có thứ tự HTML với một số tên trong đó. Sau đó chúng ta dùng một selector dựa vào element jQuery đơn giản để chọn ra các phần tử trong danh sách (<li>) và sau đó gọi phương thức each(). Chúng ta truyền một tham số là hàm. Hàm này có hai tham số dùng trong vòng lặp - chỉ mục và phần tử thực sự mà chúng ta đặt là index và listElement.

Trong vòng lặp, chúng ta gán một dòng chữ vào mỗi phần tử, dòng chữ này được tạo nên bởi chỉ mục. Đó là ví dụ về cách dùng tham số trong jQuery.

Summary

Phương thức each() rất hữu ích - cả trong phiên bản tĩnh mà ta có thể lặp mảng JS lẫn phiên bản không tĩnh mà ta tìm thông qua phần tử được chọn. Cả hai phiên bản cho phép chúng ta chuyển sang vòng lặp tiếp theo hay thoát khỏi vòng lặp dùng return true và return false tương ứng, như đã mô tả trong ví dụ trên.