each的用法

1.数组中的each

var arr = [ \"one\", \"two\", \"three\", \"four\"];   
 $.each(arr, function(){   
  alert(this);   
 });  
//上面这个each输出的结果分别为：one,two,three,four  
   
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]   
$.each(arr1, function(i, item){   
  alert(item[0]);   
});   
//其实arr1为一个二维数组，item相当于取每一个一维数组，  
//item[0]相对于取每一个一维数组里的第一个值  
//所以上面这个each输出分别为：1  4  7   
  
  
var obj = { one:1, two:2, three:3, four:4};   
$.each(obj, function(i) {   
  alert(obj[i]);      
});  
//这个each就有更厉害了，能循环每一个属性   
//输出结果为：1  2 3 4

 

2.遍历Dom元素中

<html>
<head>
<  type=\"text/ \" src=\"/jquery/jquery.js\"></ >
<  type=\"text/ \">
$(document).ready(function(){
 $(\"button\").click(function(){
  $(\"li\").each(function(){
   alert($(this).text())
  });
 });
});
</ >
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

依次弹出Coffee，Milk，Soda

 

3.each和map的比较

下面的例子是获取每一个多框的ID值；

each方法：

定义一个空数组，通过each方法，往数组添加ID值；最后将数组转换成字符串后，alert这个值；

$(function(){
  var arr = [];
  $(\":checkbox\").each(function(index){
    arr.push(this.id);
  });
  var str = arr.join(\",\");
  alert(str);
})

 

map方法:

将每个:checkbox执行return this.id；并将这些返回值，自动的保存为jQuery对象，然后用get方法将其转换成原生 数组，再使用join方法转换成字符串，最后alert这个值；

$(function(){
  var str = $(\":checkbox\").map(function() {
    return this.id;
  }).get().join();  
  alert(str);
})

当有需一个数组的值的时候，用map方法，很方便。

 

4.jquery中使用each

例遍数组，同时使用元素索引和内容。（i是索引，n是内容）

代码如下:

$.each( [0,1,2], function(i, n){
     alert( \"Item #\" + i + \": \" + n );
});

例遍对象，同时使用成员名称和变量内容。（i是成员名称，n是变量内容）

代码如下:

$.each( { name: \"John\", lang: \"JS\" }, function(i, n){
    alert( \"Name: \" + i + \", Value: \" + n );
});

例遍dom元素，此处以一个input表单元素作为例子。

如果你dom中有一段这样的代码

<input name=\"aaa\" type=\"hidden\" value=\"111\" /> 
<input name=\"bbb\" type=\"hidden\" value=\"222\" /> 
<input name=\"ccc\" type=\"hidden\" value=\"333\" /> 
<input name=\"ddd\" type=\"hidden\" value=\"444\"/>

然后你使用each如下

$.each($(\"input:hidden\"), function(i,val){
    alert(val); //输出[  HTMLInputElement]，因为它是一个表单元素。
    alert(i); //输出索引为0，1，2，3
    alert(val.name); //输出name的值
    alert(val.value); //输出value的值
});

 

5.each中根据this查找元素

实现效果”回复”两个字只有在鼠标经过的时候才显示出来

<ol class=\"commentlist\">
  <li class=\"comment\">
    <div class=\"comment-body\">
     <p>嗨，第一层评论</p>
     <div class=\"reply\">
      <a href=\"#\" class=\".comment-reply- \">回复</a>
     </div>
    </div>
    <ul class=\"children\">
     <li class=\"comment\">
      <div class=\"comment-body\">
      <p>第二层评论</p>
      <div class=\"reply\">
       <a href=\"#\" class=\".comment-reply- \">回复</a>
      </div>
     </div></li>
    </ul>
  </li>
</ol>

js代码如下

$(\"div.reply\").hover(function(){
     $(this).find(\".comment-reply- \").show();
},function(){
     $(this).find(\".comment-reply- \").hide();
});

实现效果，验证判断题是否都有选择

html代码

<ul id=\"ulSingle\">
   
      <li class=\"liStyle\">
        1. 阿斯顿按时<label id=\"selectTips\" style=\"display: none\" class=\"fillTims\">请选择</label>
        <!--begin选项-->
        <ul>
           
              <li class=\"liStyle2\">
                <span id=\"repSingle_repSingleChoices_0_labOption_0\">A     </span>.阿萨德发<input type=\"hidden\" name=\"repSingle$ctl00$repSingleChoices$ctl00$hidID\" id=\"repSingle_repSingleChoices_0_hidID_0\" value=\"1\" />
                <input id=\"repSingle_repSingleChoices_0_cheSingleChoice_0\" type=\"checkbox\" name=\"repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice\" /></li>
             
              <li class=\"liStyle2\">
                <span id=\"repSingle_repSingleChoices_0_labOption_1\">B     </span>.阿萨德发<input type=\"hidden\" name=\"repSingle$ctl00$repSingleChoices$ctl01$hidID\" id=\"repSingle_repSingleChoices_0_hidID_1\" value=\"2\" />
                <input id=\"repSingle_repSingleChoices_0_cheSingleChoice_1\" type=\"checkbox\" name=\"repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice\" /></li>
             
              <li class=\"liStyle2\">
                <span id=\"repSingle_repSingleChoices_0_labOption_2\">C     </span>.阿斯顿<input type=\"hidden\" name=\"repSingle$ctl00$repSingleChoices$ctl02$hidID\" id=\"repSingle_repSingleChoices_0_hidID_2\" value=\"3\" />
                <input id=\"repSingle_repSingleChoices_0_cheSingleChoice_2\" type=\"checkbox\" name=\"repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice\" /></li>
             
        </ul>
        <!--end选项-->
        <br />
      </li>
     
</ul>

js代码

//验证单选题是否选中
    $(\"ul#ulSingle>li.liStyle\").each(function (index) {
      //选项个数
      var count = $(this).find(\"ul>li>:checkbox\").length;
      var selectedCount = 0
      for (var i = 0; i < count; i++) {
        if ($(this).find(\"ul>li>:checkbox:eq(\" + i + \")\").attr(\"checked\")) {
          selectedCount++;
          break;
        }
      }
      if (selectedCount == 0) {
        $(this).find(\"label#selectTips\").show();
        return false;
      }
      else {
        $(this).find(\"label#selectTips\").hide();
      }
    })

 

6.官方解释

以下是官方的解释：

jQuery.each( , [callback])

概述
通用例遍方法，可用于例遍对象和数组。

不同于例遍 jQuery 对象的 $().each() 方法，此方法可用于例遍任何对象。回调函数拥有两个参数：第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

参数

需要例遍的对象或数组。

callback (可选)Function
每个成员/元素执行的回调函数。

 

以上所述就是本文的全部内容了，希望大家能够喜欢。

继续阅读与本文标签相同的文章

jquery 遍历 each map
最新文章 最热文章
收藏 打印

特别推荐 2026年05月14日 星期四

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章

1
jquery正确清除input file值的方法
742人阅读
2
jquery将一个DIV显示在屏幕中间(居中)
458人阅读
3
jQuery设置文本区域的光标位置
759人阅读