在網(wǎng)頁或其他開發(fā)中，會經(jīng)常碰到遍歷元素的問題，jquery each()方法完美的解決遍歷問題，比原生js中for循環(huán)更加簡單，下 面介紹一下jquery each()方法如何遍歷ul下的li元素，本文介紹兩個不同的寫法。

 先來看看Li標(biāo)簽的HTML代碼： 

< ul id="ul_Items"> 

 < li>aaa< /li> 

 < li>bbb< /li> 

 < li>ccc< /li> 

< /ul>

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

第一種寫法：

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

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

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

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

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

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

1、$(selector).each(function(index,element)) 作用：在dom處理上面用的較多，如上面例子第一種寫法。

2、$.each(dataresource,function(index,element)) 作用：在數(shù)據(jù)處理上用的比較多 

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

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

輸出： 圖02 

3、結(jié)論： 

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

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

備注：使用時請把DOM標(biāo)簽中的空格刪掉。

上一篇：解決KindEditor編輯器無法使用flash插件影響圖片批量上傳

下一篇：網(wǎng)頁中只渲染日期不顯示時間的解決方法