摘要：分享在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框架实现“for循环”的四种方式！的更多相关文章

  1. Map集合遍历的四种方式理解和简单使用-----不能for循环遍历

    Map集合遍历的四种方式理解和简单使用   ~Map集合是键值对形式存储值的,所以遍历Map集合无非就是获取键和值,根据实际需求,进行获取键和值 1:无非就是通过map.keySet()获取到值,然后 ...

  2. jQuery异步获取json数据的2种方式

    jQuery异步获取json数据有2种方式,一个是$.getJSON方法,一个是$.ajax方法.本篇体验使用这2种方式异步获取json数据,然后追加到页面. 在根目录下创建data.json文件: ...

  3. jQuery绑定事件的四种方式：bind、live、delegate、on

    1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...

  4. JavaWeb_(Struts2框架)Struts创建Action的三种方式

    此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...

  5. iOS－Core Foundation框架到Foundation桥接的三种方式

    温故知新.勤总结,才能生巧!这次总结一下 :Core Foundation框架到Foundation桥接的三种方式 Foundation提供OC的基础类(像NSObject).基本数据类型等. Cor ...

  6. 教你三种jQuery框架实现元素显示及隐藏动画方式

    摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是"默认方式显示和隐藏"."滑动方式显示和隐藏"."淡入淡出显示和隐藏". ...

  7. PHP数组循环遍历的四种方式

     1.使用for循环遍历数组     conut($arr);用于统计数组元素的个数.     for循环只能用于遍历,纯索引数组!!!!     如果存在关联数组,count统计时会统计两种数组的总 ...

  8. jQuery绑定事件的四种方式

      jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都 ...

  9. jquery全局加载函数的几种方式;

    1.使用javascript方式(function(){})(); 2.使用jQuery(function($) {}); 3.使用$(document).ready(function(){}); 其 ...

随机推荐

  1. Docker镜像基本使用

    使用 Docker 镜像 Docker 运行容器前需要本地存在对应的镜像,如果本地不存在该镜像,Docker 会从镜像仓库下载该镜像. 获取镜像 docker pull [选项] [Docker Re ...

  2. [CTF]Rabbit加密

    [CTF]Rabbit加密 ---------------------  作者:adversity`  来源:CSDN  原文:https://blog.csdn.net/qq_40836553/ar ...

  3. 【python】Leetcode每日一题-直方图的水量（接雨水）

    [python]Leetcode每日一题-直方图的水量(接雨水) [题目描述] 给定一个直方图(也称柱状图),假设有人从上面源源不断地倒水,最后直方图能存多少水量?直方图的宽度为 1. 上面是由数组 ...

  4. Jetbrains系列产品License key is in legacy format

    原文链接: https://zhile.io/2018/08/25/jetbrains-license-server-crack.html

  5. PHP基础-常用的数组相关处理函数

    一 数组键/值操作有关的函数 1. array_values()//获取数组中所有的值 $lamp=array("os"=>"linux", " ...

  6. Jmeter和Postman做接口测试的区别，孰优孰劣？

    区别1:用例组织方式 不同的目录结构与组织方式代表不同工具的测试思想,学习一个测试工具应该首先了解其组织方式. Jmeter的组织方式相对比较扁平,它首先没有WorkSpace(工作空间)的概念,直接 ...

  7. 一种巧妙的使用 CSS 制作波浪效果的思路

    在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思 ...

  8. (转)通过gitlab统计git提交的代码量

    git的代码量大多数都是根据命令行统计,或者根据第三方插件统计.但是都不满足我的需求,因为我们代码都由gitlab管理,于是想到了通过gitlab暴露出来的接口获取数据. 第一步,生成私钥 登录你的g ...

  9. gdb调试coredump(使用篇)

    gdb调试coredump(使用篇) 看到一个非常好的介绍coredump的文章,做个记录, 参考链接: https://blog.csdn.net/sunxiaopengsun/article/de ...

  10. 【转载】fedora22和win10之间的文件共享互访

    fedora22和win10之间的文件共享互访 钢铁侠与孔子 关注 2016.06.04 14:10* 字数 1327 阅读 2170评论 0喜欢 1 一,相关知识了解(本文执行环境为fedora22 ...