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

上山打老虎

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

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

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

　　

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

相关帖子

出现Win10一直在无限循环登录界面怎么办

主机开一下熄火然后一直循环是否主板坏了

开机风扇转了一下就重启无限循环解决方法

风冷散热器怎么看好坏？

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

javascript怎么实现窗口置顶

JavaScript怎样实现点击出现图片效果

使用原生querySelectorAll和forEach来实现点击切换

免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

上山打老虎 LV4