JQuery遍历方式

最新推荐文章于 2025-03-16 08:57:12 发布

you4580

最新推荐文章于 2025-03-16 08:57:12 发布

阅读量958

点赞数

文章标签： jquery javascript ecmascript

本文链接：https://blog.youkuaiyun.com/you4580/article/details/129701688

版权

文章目录
1.js的遍历方式
2. jq的遍历方式
1.js的遍历方式
for(初始化值;循环结束条件;步长)

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

$.each(object, [callback])

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //获取所有ul下面的li
            var citys = $("#city li");

            // //遍历li
            // for(var i=0;i<citys.length;i++){
            //     if("上海"==citys[i].innerHTML){
            //         //break;结束循环
            //         continue;//结束本次循环
            //     }
            //     //获取内容
            //     alert(i+":"+citys[i].innerHTML);
            // }


            // citys.each(function (index,element) {
            //     //获取li对象 第一种方式this
            //     //alert(this.innerHTML);
            //
            //     //获取li对象 第2种方式 在回调函数中定义参数
            //     //alert(index+":"+element.innerHTML);
            //     //alert(index+":"+$(element).html())
            //
            //     //判断如果是上海，就结束循环
            //      if("上海"==$(element).html()){
            //         //如果返回为false,就结束循环break
            //         //return false;
            //         //如果返回为true,就结束本次循环，继续下次循环continue
            //         return true;
            //     }
            //     alert(index+":"+$(element).html());
            // });


            // $.each(citys,function () {
            //     alert($(this).html());
            // });

            for(li of citys){
                alert($(li).html());
            }
        });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>