Jquery - 遍历

jQuery中的遍历

待遍历的html

<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>广州</li>
</ul>

 

1.for循环

jquery对象本身就是一个数组对象,因此我们可以使用for直接遍历

$(function () {
   //获取所有的ul下的li
    let cities = $("#city li");
    //遍历li
    for (let i = 0; i < cities.length; i++) {
        //获取内容
        console.log(i+":"+cities[i].innerHTML);

    }
});

 

2.jquery对象.each(匿名函数)

语法,在each方法中的参数是一个匿名函数:

jquery对象.each(function(index,element){});

* index:元素在集合中的索引

* element:集合中的每一个元素对象

匿名函数返回值:

    * true:如果当前function返回为false,则结束循环(break)。
    * false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)

代码:

$(function () {
   let cities = $("#city li");

    cities.each(function (index,element) {
        if("北京" == $(element).html()){
            //如果当前function返回为false,则结束循环(break)。
            //如果返回为true,则结束本次循环,继续下次循环(continue)
            return true;
        }
        console.log(index+":"+$(element).html());
    });
 });

 

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

这个有点像java中的增强for循环

for(元素对象 of 容器对象)

代码:

$(function () {

    let cities = $("#city li");
    for(li of cities){
        console.log($(li).html());
    }
 });

 

Jquery - 遍历

上一篇:跳出小程序 video组件 卡顿、黑屏、全屏等坑


下一篇:2019课设---基于微信小程序的食堂订餐送餐系统设计 【构思】(五)