JS遍历与JQuery遍历

电玩女神 2022-12-25 15:59 210阅读 0赞

# JS遍历 #

语法：

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

*html代码：*

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    </body>
    </html>

*JS代码：*

$(function () { 
                //1.获取所有的ul下的li
                var citys = $("#city li");
    
                //2.遍历li
                for (var i=0; i < citys.length; i++){ 
                    //获取内容
                    alert(i+":"+citys[i].innerHTML);
                }

> 这种方式可以直接使用break语句和continue语句

*例如：*

//1.获取所有的ul下的li
                var citys = $("#city li");
    
                //2.遍历li
                for (var i=0; i < citys.length; i++){ 
                    //跳过上海
                    if("上海" == citys[i].innerHTML){ 
                        continue;
                    }
                    //到广州时跳出循环
                    if("广州" == citys[i].innerHTML){ 
                        break;
                    }
    
                    //获取内容
                    alert(i+":"+citys[i].innerHTML);
                }

### JQuery遍历 ###

*  JS遍历
 *  JQuery遍历
 *   *  一、jquery对象.each(function(index,element)\{\})
     *  二、 jq对象.each(callback)
     *  三 、 for..of

# JQuery遍历 #

Jquery有三种遍历方式

--------------------

## 一、jquery对象.each(function(index,element)\{\}) ##

**jq对象.each(callback)**

> 1.  语法：  
>     jquery对象.each(function(index,element)\{\});  
>     \* index:就是元素在集合中的索引  
>     \* element：就是集合中的每一个元素对象  
>     \* this：集合中的每一个元素对象  
>     2. 回调函数返回值：  
>     \* true:如果当前function返回为false，则结束循环(break)。  
>     \* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

***html代码：***

*JS代码：(this方式)*

var citys = $("#city li");
        citys.each(function () { 
         // 获取li对象 第一种方式 this
         alert(this.innerHTML);
         });

*JS代码：（回调函数方式）*

> JQuery方式不能使用语法break和continue。用返回值代替实现

var citys = $("#city li");
    citys.each(function (index,element) { 
        //获取li对象 第二种方式 在回调函数中定义参数 index（索引） element（元素对象）
    
        if("上海" == $(element).html()){ 
            //如果当前function返回为false，则结束循环(break)。
            //如果返回为true，则结束本次循环，继续下次循环(continue)
            return true;
        }
        alert(index+":"+element.innerHTML);
    });

## 二、 jq对象.each(callback) ##

**$.each(object, \[callback\])**

*html代码：*

*JS代码：*

var citys = $("#city li");
                 $.each(citys,function () { 
                     alert($(this).html());
    
                 });

## 三 、 for…of ##

**for(元素对象 of 容器对象)**  
jquery 3.0 版本之后提供的方式，低级浏览器不适用

*html代码：*

*JS代码：*

var citys = $("#city li");
                for(li of citys){ 
                    alert($(li).html());
                }