摘要：分享在jQuery高階開發中對元素標籤體的遍歷常用的幾種方法。
本文分享自華為雲社群《盤點用jQuery框架實現“for迴圈”的四種方式！》，原文作者：灰小猿 。
今天繼續來和大家分享在jQuery高階開發中對元素標籤體的遍歷常用的幾種方法。
我們以一個案例的形式進行講解，假如我們需要遍歷的是如下ul標籤中的li標籤：
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重慶</li>
</ul>
</body>
一、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())
}
});
最後附上面四種實現的完整原始碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(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物件的each進行遍歷
// 利用this進行遍歷
/* citys.each(function () {
// alert(this.innerHTML);
alert($(this).html());
});
*/
// 利用給function賦值獲取物件文字
/*citys.each(function (index,element) { if ("上海" == $(element).html()){
return true;
}
// js方式
// alert(index + ":" + element.innerHTML);
// jQuery方式s
alert(index + ":" + $(element).text()); });*/ // 利用$.each()方法
/* $.each(citys, function () {
alert($(this).html());
});*/ // 利用for---of的方式
/* for (li of citys){
alert($(li).html())
}*/ }); </script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重慶</li>
</ul>
</body>
</html>