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

举报
灰小猿 发表于 2021/06/14 09:03:53 2021/06/14
【摘要】 目录一、JS的遍历方式二、JQuery的遍历方式1. jQuery对象.each(callback)2. $.each(object, [callback])3. for..of方法Hello,你好呀,我是灰小猿!一个超会写bug的程序猿!jQuery框架系列文章已经和大家分享了很多了,从jQuery框架的基础入门,到案例分析、再到现在的高级进阶。其中不但我自己学习到了很多东西,同时也帮助了...

目录

一、JS的遍历方式

二、JQuery的遍历方式

1. jQuery对象.each(callback)

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

3. for..of方法


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>

有问题的小伙伴记得在评论区留言提出!

我是灰小猿!我们下期见!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。