Jquery框架 for循环的四种方法

如下ul标签中的li标签为例

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

一.JS的遍历方式

$(function (message) {
            // 获取到UI下的所有Li标签
            var citys = $("#city li")
            // 利用js中的for循环进行遍历
            // 将获取到的li标签数组进行遍历
            for (var i = 0; i < citys.length; i++) {
                 // 循环内容判断
                if ("上海" == citys[i].innerHTML){
                  // break;
                    continue;
                }
                // 输出获取到的li标签中的内容
                alert(i + citys[i].innerHTML);
            }

        });

二、JQuery的遍历方式

1. jQuery对象.each(callback)

$(function (message) {
            // 获取到UI下的所有Li标签
            var citys = $("#city li")

            // 利用jQuery对象的each进行遍历
            // 利用给function赋值获取对象文本
            citys.each(function (index,element) {
                if ("上海" == $(element).html()){
                    return true;    //结束本次循环
                }
                // js方式
                // alert(index + ":" + element.innerHTML);
                // jQuery方式s
                alert(index + ":" + $(element).text());

            });
        });

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

$(function (message) {
            // 获取到UI下的所有Li标签
            var citys = $("#city li")

            // 利用$.each()方法
           $.each(citys, function () {
                alert($(this).html());
            });
        });

3. for..of方法

  语法格式是：for(元素对象 of 容器对象)

$(function (message) {
            // 获取到UI下的所有Li标签
            var citys = $("#city li")

            // 利用for---of的方式
            for (li of citys){
                alert($(li).html())
            }
        });

 

posted @ 2022-05-19 17:06  ~且听风吟~  阅读(524)  评论(0)  编辑  收藏  举报