在網(wǎng)頁(yè)或其他開(kāi)發(fā)中，會(huì)經(jīng)常碰到遍歷元素的問(wèn)題，jquery each()方法完美的解決遍歷問(wèn)題，比原生js中for循環(huán)更加簡(jiǎn)單，下 面介紹一下jquery each()方法如何遍歷ul下的li元素，本文介紹兩個(gè)不同的寫法。
先來(lái)看看Li標(biāo)簽的HTML代碼：
< ul id="ul_Items">
< li>aaa< /li>
< li>bbb< /li>
< li>ccc< /li>
< /ul>
用each()方法遍歷Li標(biāo)簽，獲取每個(gè)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
我們精簡(jiǎn)代碼后看看，其實(shí)是$().each()和$.each()的兩種寫法結(jié)構(gòu)，選擇哪種完全按個(gè)人喜好。
$().each()和$.each()這兩種寫法，在實(shí)際編程時(shí)有什么區(qū)別呢？
下面就對(duì)這兩個(gè)函數(shù)做深入的探討：
1、$(selector).each(function(index,element)) 作用：在dom處理上面用的較多，如上面例子第一種寫法。
2、$.each(dataresource,function(index,element)) 作用：在數(shù)據(jù)處理上用的比較多
示例： 此處沒(méi)有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時(shí)，通常用$(selector).each(function(index,element))函數(shù)。
在遍歷數(shù)據(jù)時(shí)，通常用$.each(dataresource,function(index,element))函數(shù)。
備注：使用時(shí)請(qǐng)把DOM標(biāo)簽中的空格刪掉。
掃一掃 加微信咨詢