JQuery 遍历方式

最新推荐文章于 2024-05-29 14:21:47 发布

南淮北安

最新推荐文章于 2024-05-29 14:21:47 发布

阅读量384

点赞数

分类专栏： JQuery 学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/nanhuaibeian/article/details/105339911

版权

JQuery 学习笔记专栏收录该内容

11 篇文章 2 订阅

订阅专栏

文章目录

- 一、JS 的遍历方式
- 二、JQuery 的遍历方式

一、JS 的遍历方式

for(初始化值;循环结束条件;步长)

    <script src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取所有的 ul 下的 li 标签
            var citys = $("#city li");
            for (var i = 0; i < citys.length; i++) {
                if ("天津" == citys[i].innerHTML) {
                    // break;结束循环
                    continue;//结束本次循环，继续下次循环
                }
                alert(i + ":" + citys[i].innerHTML);
            }
        })
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>

二、JQuery 的遍历方式

jq对象.each(callback)

（1）语法：jquery对象.each(function(index,element){});
			* index:就是元素在集合中的索引
			* element：就是集合中的每一个元素对象
			* this：集合中的每一个元素对象
（2）回调函数返回值：
			* true:如果当前function返回为false，则结束循环(break)。
			* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

    <script src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取所有的 ul 下的 li 标签
            var citys = $("#city li");
            citys.each(function (index, element) {
                if ("天津" == $(element).html()) {
                    //如果当前function返回为false，则结束循环(break)。
                    //如果返回为true，则结束本次循环，继续下次循环(continue)
                    return true;
                }
                alert(index + ":" + $(element).html())
            })
        })
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>

$.each(object, [callback])

    <script src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取所有的 ul 下的 li 标签
            var citys = $("#city li");
            $.each(citys,function () {
                // this 表示当前对象，需要将其转换为 JQuery 对象才能调用 html 方法
                if ("天津"==$(this).html()){
                    return true;
                }
                alert($(this).html())
            })
        })
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>

for..of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)

    <script type="text/javascript">
        $(function () {
            //获取所有的 ul 下的 li 标签
            var citys = $("#city li");
            for (li of citys) {
                if ("上海" == $(li).html()) {
                    // 这里的 for 循环，仍然使用 break 和 continue 跳出循环
                    continue;
                }
                alert($(li).html())
            }
        })
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>