乐趣区

关于jquery:盘点用jQuery框架实现for循环的四种方式

jiezi

摘要： 分享在 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>

点击关注，第一工夫理解华为云陈腐技术~

退出移动版