盘点用jQuery框架实现“for循环”的四种方式！
目录
Hello，你好呀，我是灰小猿！一个超会写bug的程序猿！
jQuery框架系列文章已经和大家分享了很多了，从jQuery框架的基础入门，到案例分析、再到现在的高级进阶。其中不但我自己学习到了很多东西，同时也帮助了很多需要的小伙伴。
今天我就继续来和大家分享在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>
有问题的小伙伴记得在评论区留言提出！
我是灰小猿！我们下期见！
文章来源: blog.csdn.net，作者：灰小猿，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/weixin_44985880/article/details/117854602
- 点赞
- 收藏
- 关注作者
评论（0）