盘点用jQuery框架实现“for循环”的四种方式!
摘要:分享在jQuery高级开发中对元素标签体的遍历常用的几种方法。
本文分享自华为云社区《盘点用jQuery框架实现“for循环”的四种方式!》,原文作者:灰小猿 。
今天继续来和大家分享在jQuery高级开发中对元素标签体的遍历常用的几种方法。
我们以一个案例的形式进行讲解,假如我们需要遍历的是如下ul标签中的li标签:
<body> <ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li> </ul> </body>
一、JS的遍历方式
首先第一种:利用js对象进行遍历。
利用js对象的方法进行遍历和我们平常的for循环遍历是一样的思路和解法,首先我们应该获取到需要遍历的元素标签,然后使用for循环方法对其中存在的标签进行遍历:下面以一个实例来进行讲解。
遍历四个li标签,并且弹出其中的内容,如果标签体内容是“上海”,则不弹出!
$(function (message) { // 获取到UI下的所有Li标签 var citys = $("#city li") // 利用js中的for循环进行遍历 // 将获取到的li标签数组进行遍历 for (var i = 0; i < citys.length; i++) { // 循环内容判断 if ("上海" == citys[i].innerHTML){ // break; continue; } // 输出获取到的li标签中的内容 alert(i + citys[i].innerHTML); } });
二、JQuery的遍历方式
1. jQuery对象.each(callback)
使用该方法时需要在each()中实现function()方法,在function()方法中可以进行赋参数,也可以不赋参数,
首先我们来看不用赋予参数的一种,这种方法只能用于获取元素,而不能显示当前是第几个元素。如下:
$(function (message) { // 获取到UI下的所有Li标签 var citys = $("#city li") // 利用jQuery对象的each进行遍历 // 利用this进行遍历 citys.each(function () { // alert(this.innerHTML); alert($(this).html()); }); });
其中的this表示:集合中的每一个元素对象
第二种是在function()中赋予参数:
jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element:就是集合中的每一个元素对象
利用这种方式可以回调函数返回值:如结束本次循环或结束整个循环吗,但是并不是使用break,
在这里使用的是return true/false
* false:如果当前function返回为false,则结束循环(break)。
* true:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
实例代码:
$(function (message) { // 获取到UI下的所有Li标签 var citys = $("#city li") // 利用jQuery对象的each进行遍历 // 利用给function赋值获取对象文本 citys.each(function (index,element) { if ("上海" == $(element).html()){ return true; //结束本次循环 } // js方式 // alert(index + ":" + element.innerHTML); // jQuery方式s alert(index + ":" + $(element).text()); }); });
2. $.each(object, [callback])
使用这种方法和上面那种方法相似,只不过最前面不是jQuery对象了,而是一个$符号,jQuery对象被放到了each()里面,但实现还是和上面一样的。如下:
$(function (message) { // 获取到UI下的所有Li标签 var citys = $("#city li") // 利用$.each()方法 $.each(citys, function () { alert($(this).html()); }); });
3. for..of方法
这种方法是jquery 3.0 版本之后提供的方式
语法格式是:for(元素对象 of 容器对象)
同样是容ul标签中取出li标签元素,代码如下:
$(function (message) { // 获取到UI下的所有Li标签 var citys = $("#city li") // 利用for---of的方式 for (li of citys){ alert($(li).html()) } });
最后附上面四种实现的完整源码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function (message) { // 获取到UI下的所有Li标签 var citys = $("#city li") // 利用js中的for循环进行遍历 // 将获取到的li标签数组进行遍历 for (var i = 0; i < citys.length; i++) { // 循环内容判断 if ("上海" == citys[i].innerHTML){ // break; continue; } // 输出获取到的li标签中的内容 alert(i + citys[i].innerHTML); } // 利用jQuery对象的each进行遍历 // 利用this进行遍历 /* citys.each(function () { // alert(this.innerHTML); alert($(this).html()); }); */ // 利用给function赋值获取对象文本 /*citys.each(function (index,element) { if ("上海" == $(element).html()){ return true; } // js方式 // alert(index + ":" + element.innerHTML); // jQuery方式s alert(index + ":" + $(element).text()); });*/ // 利用$.each()方法 /* $.each(citys, function () { alert($(this).html()); });*/ // 利用for---of的方式 /* for (li of citys){ alert($(li).html()) }*/ }); </script> </head> <body> <ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li> </ul> </body> </html>
相关文章
- JQuery利用sort对DOM元素进行排序
- jQuery file upload上传图片出错分析
- jquery 鼠标拖动排序Li或Table
- jQuery和CSS3超酷表单美化插件
- !function($){}(window.jQuery)
- ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式、错误信息提示、validate方法的背后
- 《jQuery与JavaScript入门经典》——2.4 调试jQuery和JavaScript
- jquery serialize对json的包装用法
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- (转)jquery图片左右滚动
- [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件
- 20 Best Drag and Drop jQuery Plugins--reference
- 自己写的jQuery放大镜插件效果(一)(采用一张大图和一张小图片的思路)