技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

jquery each()方法遍历一个列举元素如Li标签的两种写法

作者:admin    时间:2019-3-22 10:3:13    浏览:

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  
  • IT热文
  • 站长推荐