盤點用jQuery框架實現“for循環”的四種方式！

目錄

一、JS的遍歷方式

二、JQuery的遍歷方式

1. jQuery對象.each(callback)

2. $.each(object, [callback])

3. for..of方法

Hello，你好呀，我是灰小猿！一個超會寫bug的程序猿！

jQuery框架系列文章已經和大家分享了很多了，從jQuery框架的基礎入門，到案例分析、再到現在的高級進階。其中不但我自己學習到了很多東西，同時也幫助了很多需要的小伙伴。

今天我就繼續來和大家分享在jQuery高級開發中對元素標簽體的遍歷常用的幾種方法。

我們以一個案例的形式進行講解，假如我們需要遍歷的是如下ul標簽中的li標簽：

• 北京
• 上海
• 天津
• 重慶

一、JS的遍歷方式

首先第一種：利用js對象進行遍歷

利用js對象的方法進行遍歷和我們平常的for循環遍歷是一樣的思路和解法，首先我們應該獲取到需要遍歷的元素標簽，然后使用for循環方法對其中存在的標簽進行遍歷：下面以一個實例來進行講解。

遍歷四個li標簽，并且彈出其中的內容，如果標簽體內容是“上海”,則不彈出！

$(function (message) {

// 獲取到UI下的所有Li標簽

var citys = $("#city li")

// 利用js中的for循環進行遍歷

// 將獲取到的li標簽數組進行遍歷

for (var i = 0; i < citys.length; i++) {

// 循環內容判斷

if ("上海" == citys[i].innerHTML){

// break;

continue;

}

// 輸出獲取到的li標簽中的內容

alert(i + citys[i].innerHTML);

}

});

二、JQuery的遍歷方式

1. jQuery對象.each(callback)

使用該方法時需要在each()中實現function()方法，在function()方法中可以進行賦參數，也可以不賦參數，

首先我們來看不用賦予參數的一種，這種方法只能用于獲取元素，而不能顯示當前是第幾個元素。

如下：

$(function (message) {

// 獲取到UI下的所有Li標簽

var citys = $("#city li")

// 利用jQuery對象的each進行遍歷

// 利用this進行遍歷

citys.each(function () {

// alert(this.innerHTML);

alert($(this).html());

});

});

其中的this表示：集合中的每一個元素對象

第二種是在function()中賦予參數：

jquery對象.each(function(index,element){});

* index:就是元素在集合中的索引

* element：就是集合中的每一個元素對象

利用這種方式可以回調函數返回值：如結束本次循環或結束整個循環嗎，但是并不是使用break，

在這里使用的是return true/false

* false:如果當前function返回為false，則結束循環(break)。

* true:如果當前function返回為true，則結束本次循環，繼續下次循環(continue)

實例代碼：

$(function (message) {

// 獲取到UI下的所有Li標簽

var citys = $("#city li")

// 利用jQuery對象的each進行遍歷

// 利用給function賦值獲取對象文本

citys.each(function (index,element) {

if ("上海" == $(element).html()){

return true; //結束本次循環

}

// js方式

// alert(index + ":" + element.innerHTML);

// jQuery方式s

alert(index + ":" + $(element).text());

});

});

2. $.each(object, [callback])

使用這種方法和上面那種方法相似，只不過最前面不是jQuery對象了，而是一個$符號,jQuery對象被放到了each()里面，但實現還是和上面一樣的。

如下：

$(function (message) {

// 獲取到UI下的所有Li標簽

var citys = $("#city li")

// 利用$.each()方法

$.each(citys, function () {

alert($(this).html());

});

});

3. for..of方法

這種方法是jquery 3.0 版本之后提供的方式

語法格式是：for(元素對象 of 容器對象)

同樣是容ul標簽中取出li標簽元素，代碼如下：

$(function (message) {

// 獲取到UI下的所有Li標簽

var citys = $("#city li")

// 利用for---of的方式

for (li of citys){

alert($(li).html())

}

});

最后附上面四種實現的完整源碼。

• 北京
• 上海
• 天津
• 重慶

有問題的小伙伴記得在評論區留言提出！

我是灰小猿！我們下期見！

jQuery

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。