jQuery中的each方法執行個體

標籤：jquery   each   迭代   遍曆   

$.each()和$(selector).each()很相似，但是是不一樣的。

前者可用於遍曆一個數組或是json對象

而後者是專門用來遍曆一個jQuery對象

先來說說$.each()吧，一般是這麼用的

$.each(arr, function(i, v){// do something})

其中arr也就是集合，也可以是json對象

而回呼函數中的i則是數組的下標（在json中則是對應的key）

而v則是arr[i]的值（在json中則是對應的value）

下面來看一個簡單的執行個體：

var json = {name:"zhu", age:10}var arr = ['a','b','c','d']$.each(arr, function(i, v){alert(i + ":" + v)});$.each(json, function(k, v){alert(k + ":" + v)});

這樣就完成了對數組和json的遍曆。

當然了，如此遍曆用原生的js也是可以輕鬆做到的

比如遍曆上面的json或是arr，只需要：

for(var k in json){alert(k + ":" + arr[k])}

看起來似乎還是js更簡潔一些吧~效能上可能也要好一點

下面介紹$(selector).each()，這個方法在js中就不好找到替代品了。

其中$(selector)負責選中一組jQuery元素，而each函數負責遍曆它

比如我們想對一組“li”改變其文字顏色

<style>.red{color: red;}</style><ul><li>Dog</li><li>Cat</li><li>Mouse</li></ul><input type="button" id="btn"><script>$("#btn").click(function() {$("li").each(function() {$(this).toggleClass('red');});});</script>

不過實際上，jQuery中存在隱式迭代的現象

每當我們調用選取器方法尋找dom樹裡的元素時，其實就是把找到的dom元素存入一個jQuery對象裡的dom數組中，然後再把這個jQuery對象返回。

而所謂隱式迭代也就是當我們調用jQuery方法時（如 toggleClass(..)），jQuery方法會遍曆內部 dom數組，並調用每個dom元素的對應的dom屬性或方法完成操作。

所有click中的函數並不需要使用each，直接$("li").toggleClass(‘red‘)也可以

在$(seletor).each(..)中，this被綁定到了當前遍曆的DOM對象，如需獲得jQuery對象$(this)就可以了

值得注意的是，還可以在遍曆過程中提前退出遍曆，只需要return false就可以了

jQuery中的each方法執行個體