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

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