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](https://i-blog.csdnimg.cn/blog_migrate/8ec8c43fcd42283b3cd7f41796b02921.png)
![8abfc9e89cfabc427a85222970c82164.png](https://i-blog.csdnimg.cn/blog_migrate/fea8c38969afc820e50cbfa0eb4d5934.jpeg)
![93cbc5603757ce40bef2f1d23a0fd999.png](https://i-blog.csdnimg.cn/blog_migrate/8ec8c43fcd42283b3cd7f41796b02921.png)