ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

JQuery遍历

2022-08-20 10:33:44  阅读:147  来源: 互联网

标签:JQuery 遍历 jq li callback each citys


遍历

1、js的遍历方式

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

<!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">
        /*
        遍历
            1、js的遍历方式
            for(初始值;循环结束条件;步长)
            2、jq的遍历方式
            1、jq对象.each(callback)
            2、$.each(object,[callback])
            3、for..of:
         */

        $(function () {
            //1、获取所有的ul下的li
            var citys = $("#city li");

            //2、遍历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>
</body>
</html>

 

2、jq的遍历方式

  1、jq对象.each(callback)

 

  <script type="text/javascript">
        /*
        遍历
            1、js的遍历方式
            for(初始值;循环结束条件;步长)
            2、jq的遍历方式
            1、jq对象.each(callback)
            2、$.each(object,[callback])
            3、for..of:
         */

        $(function () {
            //1、获取所有的ul下的li
            var citys = $("#city li");
//jq对象.each(callback)
            citys.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;
                }

                alert(index+":"+$(element).html())
            });
        });

    </script>

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

    <script type="text/javascript">
        /*
        遍历
            1、js的遍历方式
            for(初始值;循环结束条件;步长)
            2、jq的遍历方式
            1、jq对象.each(callback)
            2、$.each(object,[callback])
            3、for..of:
         */

        $(function () {
            //1、获取所有的ul下的li
            var citys = $("#city li");

            //$.each(object,[callback])
            $.each(citys,function () {
                alert($(this).html())
            })
        });

    </script>

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

 

 

    <script type="text/javascript">
        /*
        遍历
            1、js的遍历方式
            for(初始值;循环结束条件;步长)
            2、jq的遍历方式
            1、jq对象.each(callback)
            2、$.each(object,[callback])
            3、for..of:jquery 3.0版本之后提供的方式
         */

        $(function () {
            //1、获取所有的ul下的li
            var citys = $("#city li");

            //for..of:jquery 3.0版本之后提供的方式
            for (city of citys) {
                alert($(city).html());
            }
        });

    </script>

 

标签:JQuery,遍历,jq,li,callback,each,citys
来源: https://www.cnblogs.com/xjw12345/p/16607225.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有