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());
    }
 });