jQuery và hàm each

each là vòng lặp mà jQuery cung cấp sẵn cho ta, cách thức hàm each hoạt động tương tự như vòng lặp foreach trong C#.

• each( function() ) vòng lặp chạy tuần tự từ object đầu mảng tới object cuối mảng.
• each( function(index) ) vòng lặp chạy tuần tự từ object đầu mảng tới object cuối mảng, có kèm theo biến thứ tự (index).

Lưu ý:

• each lả một vòng lặp foreach được viết bằng jQuery.
• Để truy xuất đối tượng đang được hàm each truy xuất tới ta dùng từ khóa this, cách dùng như sau jQuery(this)

Cú pháp:

Ví dụ với hàm each( function() ) ta có thẻ ul có ba thẻ con li, dùng hàm each hiện alert có nội dung là nội dung của thẻ li đang được truy xuất tới.

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#butEach1").click(function(){
  jQuery("#ul_1 li").each(function(){
   alert("Đang truy xuất tới phần tử có nội dung: " + jQuery(this).html());
  });
 });
});
</script>
<div>
 <div style="float:left;border:1px color gray;background-color:#EAEAEA;padding-right:20px;">
  <ul id="ul_1">
   <li>Dòng 1</li>
   <li>Dòng 2</li>
   <li>Dòng 3</li>
  </ul>
 </div>
 <div style="float:left;padding-left:20px;"><input type="button" value="Each" id="butEach1"/></div>
 <div style="clear:both;"></div>
</div>

Demo

• Dòng 1
• Dòng 2
• Dòng 3

Ví dụ với hàm each(function(index)) ta cũng có một thẻ ul với ba thẻ li con khi nhấn vào button Each thì ta dùng hàm each để gắn giá trị index vào từng thẻ ul con.

<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("#butEach2").click(function(){
  jQuery("#ul_2 li").each(function(index){
   jQuery(this).html(jQuery(this).html()+" "+index);
  });
 });
});
</script>
<div>
 <div style="float:left;border:1px color gray;background-color:#EAEAEA;padding-right:20px;">
  <ul id="ul_2">
   <li>Dòng</li>
   <li>Dòng</li>
   <li>Dòng</li>
  </ul>
 </div>
 <div style="float:left;padding-left:20px;"><input type="button" value="Each" id="butEach2"/></div>
 <div style="clear:both;"></div>
</div>

Demo

• Dòng
• Dòng
• Dòng

Mình xin đính chính lại là each không chỉ hoạt động với mảng jQuery object mà còn có thể hoạt động với mảng thông thường trong javascript

Cách thức sử dụng:

jQuery.each(array, callback function(index, value))

Giả sử ta có mảng gồm 10 phần tử bất kỳ, ta dùng hàm each duyệt qua từng phần tử.

Code

<script type="text/javascript">
jQuery(document).ready(function(){
 var arr = [1,2,3,40,1,20,3,50]; 
 jQuery("#arr_each_1").click(function(){
  jQuery.each(arr, function(index,value){
   alert("STT " + index + ": Gia tri "+value);
  });
 });
});
</script>
<input type="button" value="contains method" id="arr_each_1"/>

Demo