卡卡網(wǎng)

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

先來(lái)看看Li標(biāo)簽的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標(biāo)簽，獲取每個(gè)Li標(biāo)簽的文本。

第一種寫(xiě)法：

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

第二種寫(xiě)法：

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

這兩種寫(xiě)法都能實(shí)現(xiàn)同樣的功能，最后輸出結(jié)果如圖所示：

我們精簡(jiǎn)代碼后看看，其實(shí)是$().each()和$.each()的兩種寫(xiě)法結(jié)構(gòu)，選擇哪種完全按個(gè)人喜好。

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

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

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

下面就對(duì)這兩個(gè)函數(shù)做深入的探討：

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))

作用：在數(shù)據(jù)處理上用的比較多

示例：

此處沒(méi)有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、結(jié)論：

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

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

標(biāo)簽: each方法  JQuery