此账号为华为云开发者社区官方运营账号，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态
本文分享自华为云社区《盘点用jquery框架实现“for循环”的四种方式！》，原文作者：灰小猿 。
今天继续来和大家分享在 jquery 高级开发中对元素标签体的遍历常用的几种方法。
我们以一个案例的形式进行讲解，假如我们需要遍历的是如下 ul 标签中的 li 标签：
<body><ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li></ul></body>首先第一种：利用 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); } });使用该方法时需要在 each()中实现 function()方法，在 function()方法中可以进行赋参数，也可以不赋参数
首先我们来看不用赋予参数的一种，这种方法只能用于获取元素，而不能显示当前是第几个元素。
如下：
$(function (message) { // 获取到ui下的所有li标签 var citys = $("#city li") //航拍中国观后感200字 利用jquery对象的each进行遍历 // 利用this进行遍历 citys.each(function () { // alert(this.innerhtml); 湖北省大学排名 alert($(this).html()); }); });其中的 this 表示：集合中的每一个元素对象
第二种是在 function()中赋予参数：
jquery 对象.each(function(index,element){});
*index:就是元素在集合中的索引
*element：就是集合中的每一个元素对象
利用这种方式可以回调函数返回值：如结束本次循环或结束整个循环吗，但是并不是使用 break，
在这里使用的是 return true/fal
* fal:如果当前 function 返回为 fal，则结束循环(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()); }); });使用这种方法和上面那种方法相似，只不过最前面不是 jquery 对象了，而是一个 $符号,jquery 对象被放到了 each()里面，但实现还是和上面一样的。
如下：
$(function (message) { // 获取到ui下的所有li标签 var citys = $("#city li") // 利用$.each()方法 $.each(citys, function () { alert($(this).html()); }); });这种方法是 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 chart="utf-8杜克大学排名"> <title></title> <script src="../js/jquery-3.3.1.min.js" type="text/javascript" chart="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>点击关注，第一时间了解华为云新鲜技术~
本文发布于:2023-04-05 14:46:00，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/8e925d3fbed5447a3ded552df9428f19.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：jquery遍历元素的方法（讲解jquery循环遍历数组）.doc
本文 PDF 下载地址：jquery遍历元素的方法（讲解jquery循环遍历数组）.pdf
| 留言与评论（共有 0 条评论） |
