.each()
Định nghĩa và sử dụng .each() thực hiện một hành động cho mỗi phần tử, để làm được điều này ta cần sử dụng phương thức $(this). .each(function(){}) Cấu trúc $(‘li’).each(function(index){ $(this).click(function(){ $(this).addClass(“test”+index); }); }); Html viết: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>Tiêu đề</title> <script src=”https://code.jquery.com/jquery-latest.js”></script> <style> .list0 { color: red; } .list1 { color: […]
Định nghĩa và sử dụng
.each()thực hiện một hành động cho mỗi phần tử, để làm được điều này ta cần sử dụng phương thức $(this).
.each(function(){})
Cấu trúc
$('li').each(function(index){
$(this).click(function(){
$(this).addClass("test"+index);
});
});
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://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:
- list 01
- list 02
- list 03
- list 04
- list 05
- list 06
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ả).
So sánh code HTML trước và sau khi có jQuery:
| Trước khi có jQuery | Sau khi có jQuery |
| <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> |
<ul> <li class=”list0″>list 01</li> <li class=”list1″>list 02</li> <li class=”list2″>list 03</li> <li class=”list3″>list 04</li> <li class=”list4″>list 05</li> <li class=”list5″>list 06</li> </ul> |
