• 技术文档
  • 专业的网站建设公司
  • 020-39182790

技术文档

您现在的位置:首页 > 服务支持 > 技术文档
jquery each()方法如何遍历ul下的li元素
作者:织晶客服部 发布于:2021/10/30 17:52:08 点击量: 来源:织晶网络

在网页或其他开发中,会经常碰到遍历元素的问题,jquery each()方法完美的解决遍历问题,比原生js中for循环更加简单,下 面介绍一下jquery each()方法如何遍历ul下的li元素,本文介绍两个不同的写法。

 先来看看Li标签的HTML代码: 

< ul id="ul_Items"> 

 < li>aaa< /li> 

 < li>bbb< /li> 

 < li>ccc< /li> 

< /ul>

 用each()方法遍历Li标签,获取每个Li标签的文本。 

第一种写法:

$("#ul_Items li").each(function(){
  var self=$(this);
  console.log(self.text());
});
第二种写法:
$.each($("#ul_Items li"),function(){
  var self=$(this);
  console.log(self.text());
});

这两种写法都能实现同样的功能,最后输出结果如图所示: 图01 

我们精简代码后看看,其实是$().each()和$.each()的两种写法结构,选择哪种完全按个人喜好。


$().each()和$.each()这两种写法,在实际编程时有什么区别呢?


下面就对这两个函数做深入的探讨: 

1、$(selector).each(function(index,element)) 作用:在dom处理上面用的较多,如上面例子第一种写法。


2、$.each(dataresource,function(index,element)) 作用:在数据处理上用的比较多 

示例: 此处没有html代码,只有js代码,如下:

var jsonList = '[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"},{"id":"3","tagName":"banana"}]';
if(jsonList.length >0){
  $.each(JSON.parse(jsonList), function(index, obj) {
    console.log(obj.tagName);
  });
}

输出: 图02 


3、结论: 

在遍历DOM时,通常用$(selector).each(function(index,element))函数。 

在遍历数据时,通常用$.each(dataresource,function(index,element))函数。


备注:使用是请把DOM标签中的空格删掉。



上一篇:解决KindEditor编辑器无法使用flash插件影响图片批量上传

下一篇:没有了!