javaweb/JQuery/src/Traverse/Traverse.html at master · CPU-Code/javaweb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
    <script src="../js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript" charset="UTF-8">
        /*
        遍历
        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");

            /*
            //2.遍历li
            for (var i = 0; i < citys.length; i++){
                if("上海" == citys[i].innerHTML){
                    //结束循环
                    //break;

                    //结束本次循环，继续下次循环
                    continue;
                }
                //获取内容
                alert(i + ":" + citys[i].innerHTML);
            }
            */

            //3. jq对象.each(callback)

            citys.each(function (index, element) {
                //3.1 获取li对象 第一种方式 this
                //alert(this.innerHTML);
                //alert($(this).html());

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

                //判断如果是上海，则结束循环
                if("上海" == $(element).html()){
                    //如果当前function返回为false，则结束循环(break)。
                    //return false;

                    //如果返回为true，则结束本次循环，继续下次循环(continue)
                    return true;
                }

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


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

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

    </script>
</head>
<body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>天津</li>
        <li>重庆</li>
    </ul>
</body>
</html>