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

赞助商

分类目录

赞助商

最新文章

搜索

jQuery $.each() 方法的5种使用方式

作者:admin    时间:2019-3-21 11:17:38    浏览:

我想大家都知道使用循环,它提供了一种快速简便的方法来重复做一些事情。 当写代码时,很多时候我们需要用到循环,所有语言都提供循环,例如 For 循环,Do While 循环,等等。

本文我们学习怎样使用jQuery $.each() 方法,换句话说即是我们使用jQuery $.each() ,相当于Jquery的foreach,如何去循环HTML元素、数组、对象或者JSON数据。

jQuery $.each() 方法的5种使用方式

  1. $.each() 方法循环一个数组(foreach循环)
  2. $.each() 方法循环一个对象数组
  3. $.each() 方法循环JSON数据
  4. $.each() 方法循环html元素
  5. $.each() 方法表格行(tr)和获得TD值

jQuery $.each()循环

jQuery $.each()循环

我们下面开始一个一个地理解和使用jQuery $.each()方法吧,请记住在使用 $.each()方法前要先引用jquery库文件。

使用jQuery $.each()循环数组

一个含有一些数值的数组对象,如下所示,myArray是我的数组变量,它将值保存为一些水果。

现在我们想显示每一种水果名,即是,使用 jquery .each() 方法循环这个数组变量和显示每一个项目值。

Jquery代码:

var myArray = ["apple", "mango", "orange", "grapes", "banana"];

$.each(myArray, function (index, value) {
  console.log(index+' : '+value);
});

输出:

所以这里输出显示索引和值。

execcodegetcode

使用jQuery $.each()循环对象数组

让我们采用另一个变量,即一个对象数组,该数组含有一些数据。

现在使用jquery .each() 方法,我们在这个JS对象上创建一个循环并显示它的记录。

Jquery代码:

var obj= [
  { FirstName: "Andrea" , LastName:"Ely", Gender:"F"},
  { FirstName: "John" , LastName:"Shaw", Gender:"M"},
  { FirstName: "Leslie" , LastName:"Mac", Gender:"F"},
  { FirstName: "David" , LastName:"Millr", Gender:"M"},
  { FirstName: "Rehana" , LastName:"Rewa", Gender:"F"}
]

$.each(obj, function (index, value) {
  var first_name=value.FirstName;
  var last_name=value.LastName;
  console.log(first_name+" "+last_name);
});

输出:

这个输出显示了对象数组里的FirstNameLastName。

execcodegetcode

使用jQuery $.each()循环遍历一个列举元素

这个例子中将循环遍历HTML元素即是li标签并显示li标签的文本。 我们的HTML标记ul,li标签如下。

现在通过使用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>

Jquery代码:

$("#ul_Items li").each(function(){
  var self=$(this);
  console.log(self.text());
});

另一种写法我们也能达到同样的结果,代码如下:

$.each($("#ul_Items li"),function(){
  var self=$(this);
  console.log(self.text());
});

输出:

最后,我们能显示所有Li标签的文本。

execcodegetcode

我们让它变得更加实用真实的编程场景,现在如果用户想要只展示水果会怎样。 即,仅显示其文本为水果的特定Li文本。

如果你注意到我们的HTML标记,我们已经为每个li标签添加了一个类即是fruitsautomobile。 现在使用这个类,我们可以过滤我们的Li标签。 现在让我们看看我们要显示的内容。

Jquery代码:

$("#ul_Items li").each(function(){
  var self=$(this);
  //这将检查li是否有类fruits然后才会显示
  if(self.hasClass("fruits"))
  {
    console.log(self.text());
  }else
  {
    // other code logic
  }
});

另一种方法是,如果你确定只显示带有文本作为水果的Li标签。 那么最好的方法是只选择那些Li标签并在其上循环,而不是遍历上面示例中显示的所有Li标签。

所以现在jquery代码循环遍历li标签,其中class为fruits,如下所示。

$("#ul_Items li.fruits").each(function(){
  var self=$(this);
  console.log(self.text());
});

输出:

execcodegetcode

使用jQuery $.each()循环遍历一个表格行(tr)

这里我们有一个HTML表并添加了一些虚拟行。 现在我们想要使用jquery读取这些表格单元格值。

现在使用$.each()方法,我们获取每个表行单元格值即是每个td值。

<table id="myTable" style="margin-left:50px;">
  <tr><th>Sr no</th><th>Name</th><th>Gender</th><th>Location</th></tr>
  <tr><td> 1</td><td>Satinder Singh</td><td> M </td><td> India </td></tr>
  <tr><td> 2 </td><td>Amit Sarna</td><td> M </td><td> France </td></tr>
  <tr><td> 3 </td><td>Andrea Ely</td><td> F </td><td> Brazil </td></tr>
  <tr><td> 4 </td><td>Leslie Mac </td><td> F </td><td> Australia </td></tr>
  <tr><td> 5 </td><td>Sonya David </td><td> F </td><td>America</td></tr>
</table>

Jquery代码:

$(".button").on('click', function () {
  $("#myTable tr").each(function () {
    var self = $(this);
    var col_1_value = self.find("td:eq(0)").text().trim();
    var col_2_value = self.find("td:eq(1)").text().trim();
    var col_3_value = self.find("td:eq(2)").text().trim();
    var col_4_value = self.find("td:eq(3)").text().trim();
    var result = col_1_value + " - " + col_2_value + " - " + col_3_value + " - " + col_4_value;
    console.log(result);
  });
});

execcodegetcode

结论:在本文中,我们学习了如何以多种不同方式使用jquery $.each()方法,我们可以循环遍历简单数组,复杂JSON对象或HTML标记即循环遍历表行或li标记。

标签: JQuery  each方法  
  • IT热文
  • 站长推荐
  • 2018年文化和自然遗产日专题 2019-05-26
  • “百名专家走进盟市旗县科普传播行”活动通辽站启动 2019-05-26
  • 泰国力争今年吸引1000万中国游客 2019-05-25
  • 卡赛首站启动 欧马可S3助力危化品运输 2019-05-24
  • 看到101的Yamy 终于知道单眼皮怎么化眼妆了 2019-05-23
  • 2018中国双一流大学专业排行榜发布 清华大学位列第一 2019-05-23
  • 回复@老老保老张工:计划不要批准?那不还是你自己做主?有必要走形式么? 2019-05-22
  • 新华社评论员:聚焦新目标 开启新征程 2019-05-22
  • 香港田径锦标赛飞人夺冠 2019-05-21
  • 我要讨干嘛?姜太公钓鱼,愿者上钩。 2019-05-20
  • 古村旅行地中国国家地理网 2019-05-20
  • 四届市委第五轮巡察工作动员部署会召开 杨文英黄玉剑讲话 2019-05-19
  • 机关党建工作巡礼——甘肃“走前头作表率” 2019-05-19
  • 为了民族复兴·英雄烈士谱 2019-05-18
  • 外贸创新举措 让开放惠及世界 2019-05-18
  • 702| 802| 586| 710| 761| 514| 314| 14| 331| 910|