Love beautiful code? We do too.

  1. Home
  2. Tutorial
  3. Hàm jQuery
  4. .each() trong jQuery
Previous Lesson Next Lesson

.each() trong jQuery

Định nghĩa và sử dụng .each() trong jQuery

.each(): Thực hiện một hành động cho mỗi phần tử, mỗi lần thực hiện một phần tử, để làm được điều này ta cần sử dụng phương thức $(this).

Cấu trúc .each() trong jQuery

Đã được thêm vào từ phiên bản 1.0

.each(function(){}
-------------------------------------------------------------------------------------------
$('li').each(function(index){
    $(this).click(function(){
        $(this).addClass("test"+index);
    });
});

.each(function(){}

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.list0 { color: red; }
.list1 { color: blue; }
.list2 { color: yellow; }
.list3 { color: green; }
.list4 { color: gray; }
.list5 { color: pink; }
</style>
<script>
$(function(){
    $('li').each(function(index){
        $(this).click(function(){
            $(this).addClass("list"+index);
        });
    });
});
</script>
</head>

<body>
<ul>
<li>list 01</li>
<li>list 02</li>
<li>list 03</li>
<li>list 04</li>
<li>list 05</li>
<li>list 06</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

Khi sử dụng .each(), phương thức click sẽ chỉ tác động lên từng phần tử riêng lẻ (click lên từng phần tử li để thấy kết quả).

Previous Lesson Next Lesson

Viết câu trả lời

Drop Images

0 Bình luận

Danh mục bài học

Hoclaptrinh.vn © 2017

From Coder With