JQuery遍历

monkey博客 2023-02-01 原文

遍历

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">

        /*
            遍历
               js的遍历方式
                　　for（初始化值；循环结束条件；步长）
                jq的遍历方式
                　　jq对象.each（callback）
                　　$.each（object，[ callback ] ）
                　　for..of ：
         */
        $(function () {
           //1.获取所有的ul下的li
            let city = $("#city li");
           //2.遍历li
            for (let 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>

jq的遍历方式

　　jq对象.each（callback）

    <script type="text/javascript">

        /*
            遍历
               js的遍历方式
                　　for（初始化值；循环结束条件；步长）
                jq的遍历方式
                　　jq对象.each（callback）
                　　$.each（object，[ callback ] ）
                　　for..of ：
         */
        $(function () {
           //1.获取所有的ul下的li
            let city = $("#city li");



            //2.jq对象.each（callback）
            city.each(function (index,element) {
               //3.1获取li对象  第一种方式 this
                //alert(this.innerHTML);

                //alert($(this).html());

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

                if ("上海" == $(this).html()){
                    // 如果当前function返回为false，则结束循环(break)，
                    // 如果返回为true，则结束本次循环，继续下次循环(continue)
                    return true;
                }
                alert(index + ":" + $(element).html());
            });


        });
    </script>

　　$.each（object，[ callback ] ）

    <script type="text/javascript">

        /*
            遍历
               js的遍历方式
                　　for（初始化值；循环结束条件；步长）
                jq的遍历方式
                　　jq对象.each（callback）
                　　$.each（object，[ callback ] ）
                　　for..of ：
         */
        $(function () {
           //1.获取所有的ul下的li
            let city = $("#city li");

            //$.each（object，[ callback ] ）
            $.each(city,function () {
                alert($(this).html());
            })





        });
    </script>

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

    <script type="text/javascript">

        /*
            遍历
               js的遍历方式
                　　for（初始化值；循环结束条件；步长）
                jq的遍历方式
                　　jq对象.each（callback）
                　　$.each（object，[ callback ] ）
                　　for..of ：
         */
        $(function () {
           //1.获取所有的ul下的li
            let city = $("#city li");//for ... of:jquery 3.0 版本之后提供的方式
            for (li of city){
                alert($(li).html());
            }



        });
    </script>