jQuery框架实现“for循环”的4种方法

最新推荐文章于 2023-04-04 12:00:03 发布

is芳小芳

最新推荐文章于 2023-04-04 12:00:03 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

原文链接：https://cloud.tencent.com/developer/article/1876862

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

// Html code
<body>
  <ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
  </ul>
</body>

1、js 遍历循环

//遍历4个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);
  }

});

2、jquery 的遍历方法

1、jquery对象.each(callback)

使用该方法时需要each()中实现function()方法，可以赋值参数，也可以不赋值参数。

首先第一种不用赋予参数的一种，这种方法只能用于获取元素，而不能显示当前是第几个元素。

如下：

//其中的this表示：集合中的每一个元素对象     
$(function (message) {
            // 获取到UI下的所有Li标签
            var citys = $("#city li")

            // 利用jQuery对象的each进行遍历
            // 利用this进行遍历
            citys.each(function () {
                // alert(this.innerHTML);
                alert($(this).html());
            });

        });

第二种是在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())
            }

        });