浅析jQuery 遍历函数，javascript中的each遍历

jQuery 遍历函数

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

函数

each的用法

1.数组中的each

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元素中

Coffee
Milk
Soda

依次弹出Coffee，Milk，Soda

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

each方法：

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

map方法:

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

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

代码如下:

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

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

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

然后你使用each如下

代码如下:

<div class="jb51code">
<pre class="brush:js;">
$.each($("input:hidden"),val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值
});

5.each中根据this查找元素

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

嗨，第一层评论

js代码如下

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

html

  <li class="liStyle"&gt;
    1.阿斯顿按时<label id="selectTips" style="display: none" class="fillTims"&gt;请选择</label>
    <!--begin选项-->
    <ul>

          <li class="liStyle2"&gt;
            <span id="repSingle_repSingleChoices_0_labOption_0"&gt;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"&gt;
            <span id="repSingle_repSingleChoices_0_labOption_1"&gt;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"&gt;
            <span id="repSingle_repSingleChoices_0_labOption_2"&gt;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>

js代码

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(); } })

ps:传说中attr("property","value");在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");

6.官方解释