摘要：分享在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>点击关注，第一工夫理解华为云陈腐技术~
发表回复