写点什么

盘点用 jQuery 框架实现“for 循环”的四种方式!

发布于: 2021 年 06 月 17 日

​​【本期推荐】为什么一到大促,我们的钱包总是被掏空?是大家自制力不够,还是电商平台太会读懂人心,从技术维度,抽丝剥茧一探究竟。



​​​​摘要:分享在 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>
复制代码


点击关注,第一时间了解华为云新鲜技术~

发布于: 2021 年 06 月 17 日阅读数: 18
用户头像

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区,提供全面深入的云计算前景分析、丰富的技术干货、程序样例,分享华为云前沿资讯动态,方便开发者快速成长与发展,欢迎提问、互动,多方位了解云计算! 传送门:https://bbs.huaweicloud.com/

评论

发布
暂无评论
盘点用jQuery框架实现“for循环”的四种方式!