jquery each()方法可用于遍歷一個列舉元素，如Li標簽，本文介紹兩個不同的寫法。

先來看看Li標簽的HTML代碼：

<ul id="ul_Items">
  <li class='fruits' >Apple</li>
  <li class='fruits' >Mango</li>
  <li class='automobile' >Honda Accord</li>
  <li class='automobile' >Harley Davidson</li>
  <li class='fruits' >Oranges</li>
  <li class='fruits' >Grapes</li>
  <li class='automobile' >Royal Enfield</li>
</ul>

用each()方法遍歷Li標簽，獲取每個Li標簽的文本。

第一種寫法：

$("#ul_Items li").each(function(){
  var self=$(this);
  console.log(self.text());
});

第二種寫法：

$.each($("#ul_Items li"),function(){
  var self=$(this);
  console.log(self.text());
});

這兩種寫法都能實現同樣的功能，最后輸出結果如圖所示：

我們精簡代碼后看看，其實是$().each()和$.each()的兩種寫法結構，選擇哪種完全按個人喜好。

$().each()和$.each()的區別

$().each()和$.each()這兩種寫法，在實際編程時有什么區別呢？

1. $(selector).each(function(index,element))
2. $.each(dataresource,function(index,element))

下面就對這兩個函數做深入的探討：

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

作用：在dom處理上面用的較多

示例：

html代碼

<ul id="each_id">
  <li>Coffee</li>
  <li>Soda</li>
  <li>Milk</li>
</ul>

js代碼

$("#each_id li").each(function(){
  console.log($(this).text())
});
 

輸出：

2、$.each(dataresource,function(index,element))

作用：在數據處理上用的比較多

示例：

此處沒有html代碼，只有js代碼，如下：

var jsonResourceList = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"}]';
if(jsonResourceList.length >0){
  $.each(JSON.parse(jsonResourceList), function(index, obj) {
    console.log(obj.tagName);
  });
}

輸出：

3、結論：

在遍歷DOM時，通常用$(selector).each(function(index,element))函數。

在遍歷數據時，通常用$.each(dataresource,function(index,element))函數。

標簽: each方法  JQuery