JQuery遍历

JQuery遍历

1.js的遍历方式

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

2.JQuery的遍历方式

　　1.JQuery对象.each(callback)

　　2.$.each(object,[callback])

　　3.for..of : jquery 3.0 版本之后提供的方式

Js遍历for循环

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取所有的ul下的li
            var city = $("#city li");
            //2.遍历li
            for (var i = 0; i <city.length; i++) {
                //获取内容
                alert(i+":"+city[i].innerHTML);
            }
        });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>
复制代码

JQuery遍历each方法

复制代码
    <script type="text/javascript">
        $(function () {
            //JQuery对象.each(callback)
            city.each(function (index,element) {
                //获取li对象，第一种方式 this
                //alert(this.innerHTML);
                //alert($(this).html());

                //获取li对象，第二种方式 在回调函数中定义参数  index(索引)  element(元素对象)
                //alert(index+":"+element.innerHTML);
                //alert(index+":"+$(element).html());

                //判断如果是上海则结束循环
                if ("上海" == $(element).html()){
                    //如果当前function返回为false，则结束循环。(break)
                    //如果返回为true，则结束本次循环，继续下次循环(continue)
                    //return false;
                    return true;
                }
                alert(index+":"+$(element).html());
            });
        });
    </script>
复制代码

JQuery遍历全局$.each&for...of

导入版本为3.0以上的这里报错，是工具没有检测到，不用管直接运行看看就行

复制代码
    <script type="text/javascript">
        $(function () {
            //$.each(object,[callback])
            /*$.each(city,function () {
                alert($(this).html());
                //其余的和上述一样
            });*/

            //for...of:jquery 3.0 版本之后提供的方式
            for(li of city){
                alert($(li).html());
            }
        });
    </script>
复制代码
posted @   魔光领域  阅读(99)  评论(0)  编辑  收藏  举报
相关博文：
· 使用传统的方式遍历集合,对集合中的数据进行过滤和使用Stream流的方式,遍历集合,对集合中的数据进行过滤
· JQuery插件机制
· JQuery遍历
· JQuery_遍历for循环&each方法$全局each&forof讲解
· JQuery遍历
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示