jquery 遍历_Web前端开发(15)——JQuery遍历

JQuery遍历

在学习之前先导入一段代码,供我们查看效果:

<html>    <head>        <title>遍历title>        <script>            $(function () {                //1.获取所有的ul下的li                var citys = $("#city li");                //2.遍历li                            }script>    head>    <body>        <ul id="city">            <li>北京li>            <li>上海li>            <li>天津li>            <li>重庆li>        ul>    body>html>
js的遍历方式
for(初始化值;循环结束条件;步长)

这种方式与java中基本一致,如果内部加上if判断的话可以通过break结束for循环,可以通过continue跳至下一个循环。

比如遍历li,如果遇到上海结束循环:

for (var i = 0; i < citys.length; i++) {    if("上海" == citys[i].innerHTML){        break;    }    alert(i+":"+citys[i].innerHTML);}

再比如遍历li,如果遇到上海跳至下一个循环:

for (var i = 0; i < citys.length; i++) {    if("上海" == citys[i].innerHTML){        continue;    }    alert(i+":"+citys[i].innerHTML);}

JQuery的遍历方式

①jq对象.each(callback)

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

以每一个匹配的元素作为上下文来执行一个函数。意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。返回'false'将停止循环(就像在上面的循环中使用 'break')。返回'true'跳至下一个循环(就像在上面的循环中使用'continue')。

比如遍历li,如果遇到上海结束循环:

citys.each(function (index,element) {    if("上海" == $(element).html()){        return false;    }    alert(index+":"+$(element).html());});

②$.each(object, [callback])

$.each(object, function(index,element){});

通用遍历方法,可用于遍历对象和数组。不同于遍历jQuery对象的$().each()方法,此方法可用于遍历任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出each循环可使回调函数返回false,其它返回值将被忽略。

比如遍历li,如果遇到上海结束循环:

$.each(citys, function(index,element) {    if("上海" == $(element).html()){         return false;    }    alert(index+":"+$(element).html());});

③for...of

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

增强for循环是jquery 3.0 版本之后提供的方式,虽然很实用,但是不建议使用。

同样是遍历li,如果遇到上海结束循环:

for(li of citys){    if("上海" == $(li).html()){         return false;    }    alert($(li).html());}
93cbc5603757ce40bef2f1d23a0fd999.png 8abfc9e89cfabc427a85222970c82164.png 93cbc5603757ce40bef2f1d23a0fd999.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值