jQuery 遍歷函數(shù)詳解

更新時(shí)間：2015年07月05日 16:36:20 投稿：hebedich

文章介紹了幾個(gè)在jQuery中非常有用的遍歷函數(shù)，遍歷函數(shù)是做么的方便。當(dāng)在它們一起使用時(shí)，它們將更加強(qiáng)大。也就是說，一個(gè)函數(shù)的輸出是另一個(gè)函數(shù)的輸入，它們是鏈?zhǔn)降?。下面我們就來詳?xì)探討下吧。

jQuery 遍歷函數(shù)包括了用于篩選、查找和串聯(lián)元素的方法。

函數(shù) 描述
.add() 將元素添加到匹配元素的集合中。
.andSelf() 把堆棧中之前的元素集添加到當(dāng)前集合中。
.children() 獲得匹配元素集合中每個(gè)元素的所有子元素。
.closest() 從元素本身開始，逐級(jí)向上級(jí)元素匹配，并返回最先匹配的祖先元素。
.contents() 獲得匹配元素集合中每個(gè)元素的子元素，包括文本和注釋節(jié)點(diǎn)。
.each() 對(duì) jQuery 對(duì)象進(jìn)行迭代，為每個(gè)匹配元素執(zhí)行函數(shù)。
.end() 結(jié)束當(dāng)前鏈中最近的一次篩選操作，并將匹配元素集合返回到前一次的狀態(tài)。
.eq() 將匹配元素集合縮減為位于指定索引的新元素。
.filter() 將匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素。
.find() 獲得當(dāng)前匹配元素集合中每個(gè)元素的后代，由選擇器進(jìn)行篩選。
.first() 將匹配元素集合縮減為集合中的第一個(gè)元素。
.has() 將匹配元素集合縮減為包含特定元素的后代的集合。
.is() 根據(jù)選擇器檢查當(dāng)前匹配元素集合，如果存在至少一個(gè)匹配元素，則返回 true。
.last() 將匹配元素集合縮減為集合中的最后一個(gè)元素。
.map() 把當(dāng)前匹配集合中的每個(gè)元素傳遞給函數(shù)，產(chǎn)生包含返回值的新 jQuery 對(duì)象。
.next() 獲得匹配元素集合中每個(gè)元素緊鄰的同輩元素。
.nextAll() 獲得匹配元素集合中每個(gè)元素之后的所有同輩元素，由選擇器進(jìn)行篩選（可選）。
.nextUntil() 獲得每個(gè)元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。
.not() 從匹配元素集合中刪除元素。
.offsetParent() 獲得用于定位的第一個(gè)父元素。
.parent() 獲得當(dāng)前匹配元素集合中每個(gè)元素的父元素，由選擇器篩選（可選）。
.parents() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，由選擇器篩選（可選）。
.parentsUntil() 獲得當(dāng)前匹配元素集合中每個(gè)元素的祖先元素，直到遇到匹配選擇器的元素為止。
.prev() 獲得匹配元素集合中每個(gè)元素緊鄰的前一個(gè)同輩元素，由選擇器篩選（可選）。
.prevAll() 獲得匹配元素集合中每個(gè)元素之前的所有同輩元素，由選擇器進(jìn)行篩選（可選）。
.prevUntil() 獲得每個(gè)元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。
.siblings() 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。
.slice() 將匹配元素集合縮減為指定范圍的子集。

each的用法

1.數(shù)組中的each

 var arr = [ "one", "two", "three", "four"];   
 $.each(arr, function(){   
  alert(this);   
 });  
//上面這個(gè)each輸出的結(jié)果分別為：one,two,three,four  
  
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]   
$.each(arr1, function(i, item){   
  alert(item[0]);   
});   
//其實(shí)arr1為一個(gè)二維數(shù)組，item相當(dāng)于取每一個(gè)一維數(shù)組，  
//item[0]相對(duì)于取每一個(gè)一維數(shù)組里的第一個(gè)值  
//所以上面這個(gè)each輸出分別為：1  4  7   
 
 
var obj = { one:1, two:2, three:3, four:4};   
$.each(obj, function(i) {   
  alert(obj[i]);      
});  
//這個(gè)each就有更厲害了，能循環(huán)每一個(gè)屬性   
//輸出結(jié)果為：1  2 3 4

2.遍歷Dom元素中

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
  $("li").each(function(){
   alert($(this).text())
  });
 });
});
</script>
</head>
<body>
<button>輸出每個(gè)列表項(xiàng)的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>

依次彈出Coffee，Milk，Soda

3.each和map的比較

下面的例子是獲取每一個(gè)多框的ID值；

each方法：

定義一個(gè)空數(shù)組，通過each方法，往數(shù)組添加ID值；最后將數(shù)組轉(zhuǎn)換成字符串后，alert這個(gè)值；

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

map方法:

將每個(gè):checkbox執(zhí)行return this.id；并將這些返回值，自動(dòng)的保存為jQuery對(duì)象，然后用get方法將其轉(zhuǎn)換成原生Javascript數(shù)組，再使用join方法轉(zhuǎn)換成字符串，最后alert這個(gè)值；

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

當(dāng)有需一個(gè)數(shù)組的值的時(shí)候，用map方法，很方便。

4.jquery中使用each

例遍數(shù)組，同時(shí)使用元素索引和內(nèi)容。（i是索引，n是內(nèi)容）

代碼如下:

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

例遍對(duì)象，同時(shí)使用成員名稱和變量?jī)?nèi)容。（i是成員名稱，n是變量?jī)?nèi)容）
代碼如下:

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

例遍dom元素，此處以一個(gè)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); //輸出[object HTMLInputElement]，因?yàn)樗且粋€(gè)表單元素。
alert(i); //輸出索引為0，1，2，3
alert(val.name); //輸出name的值
alert(val.value); //輸出value的值
});

5.each中根據(jù)this查找元素

實(shí)現(xiàn)效果”回復(fù)”兩個(gè)字只有在鼠標(biāo)經(jīng)過的時(shí)候才顯示出來

<ol class="commentlist">
  <li class="comment">
    <div class="comment-body">
     <p>嗨，第一層評(píng)論</p>
     <div class="reply">
      <a href="#" class=".comment-reply-link">回復(fù)</a>
     </div>
    </div>
    <ul class="children">
     <li class="comment">
      <div class="comment-body">
      <p>第二層評(píng)論</p>
      <div class="reply">
       <a href="#" class=".comment-reply-link">回復(fù)</a>
      </div>
     </div></li>
    </ul>
  </li>
</ol>

js代碼如下

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

實(shí)現(xiàn)效果，驗(yàn)證判斷題是否都有選擇

html

<ul id="ulSingle">
  
      <li class="liStyle">
        1. 阿斯頓按時(shí)<label id="selectTips" style="display: none" class="fillTims">請(qǐng)選擇</label>
        <!--begin選項(xiàng)-->
        <ul>
          
              <li class="liStyle2">
                <span id="repSingle_repSingleChoices_0_labOption_0">A     </span>.阿薩德發(fā)<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>.阿薩德發(fā)<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選項(xiàng)-->
        <br />
      </li>
    
</ul>

js代碼

//驗(yàn)證單選題是否選中
    $("ul#ulSingle>li.liStyle").each(function (index) {
      //選項(xiàng)個(gè)數(shù)
      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(object, [callback])

概述
通用例遍方法，可用于例遍對(duì)象和數(shù)組。

不同于例遍 jQuery 對(duì)象的 $().each() 方法，此方法可用于例遍任何對(duì)象?；卣{(diào)函數(shù)擁有兩個(gè)參數(shù)：第一個(gè)為對(duì)象的成員或數(shù)組的索引，第二個(gè)為對(duì)應(yīng)變量或內(nèi)容。如果需要退出 each 循環(huán)可使回調(diào)函數(shù)返回 false，其它返回值將被忽略。

參數(shù)
objectObject
需要例遍的對(duì)象或數(shù)組。

callback (可選)Function
每個(gè)成員/元素執(zhí)行的回調(diào)函數(shù)。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: