卡卡网

jquery each()方法可用于遍历一个列举元素，如Li标签，本文介绍两个不同的写法。

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

<ul id="ul_Items">
  <li class='fruits' >Apple</li>
  <li class='fruits' >Mango</li>
  <li class='automobile' >Honda Accord</li>
  <li class='automobile' >Harley Davidson</li>
  <li class='fruits' >Oranges</li>
  <li class='fruits' >Grapes</li>
  <li class='automobile' >Royal Enfield</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());
});

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

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

$().each()和$.each()的区别

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

1. $(selector).each(function(index,element))
2. $.each(dataresource,function(index,element))

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

1、$(selector).each(function(index,element))

作用：在dom处理上面用的较多

示例：

html代码

<ul id="each_id">
  <li>Coffee</li>
  <li>Soda</li>
  <li>Milk</li>
</ul>

js代码

$("#each_id li").each(function(){
  console.log($(this).text())
});
 

输出：

2、$.each(dataresource,function(index,element))

作用：在数据处理上用的比较多

示例：

此处没有html代码，只有js代码，如下：

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

输出：

3、结论：

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

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

标签: each方法  JQuery