盘点用jQuery框架实现“for循环”的四种方式！-51CTO.COM

今天来和大家分享在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>