JQuery遍历

遍历

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>