首页 > 其他分享> > JQuery遍历

JQuery遍历

2022-08-20 10:34:34 作者：互联网

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>

搜索

复制

标签：JQuery,遍历,li,html,each,alert
来源： https://www.cnblogs.com/pengtianyang/p/16607240.html