jQuery遍歷函式,javascript中的each遍歷

ndblog發表於2013-04-05
jQuery函式JavaScript

 

jQuery 遍歷函式

jQuery 遍歷函式包括了用於篩選、查詢和串聯元素的方法。

函式 描述
.add() 將元素新增到匹配元素的集合中。
.andSelf() 把堆疊中之前的元素集新增到當前集合中。
.children() 獲得匹配元素集合中每個元素的所有子元素。
.closest() 從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素。
.contents() 獲得匹配元素集合中每個元素的子元素，包括文字和註釋節點。
.each() 對 jQuery 物件進行迭代，為每個匹配元素執行函式。
.end() 結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。
.eq() 將匹配元素集合縮減為位於指定索引的新元素。
.filter() 將匹配元素集合縮減為匹配選擇器或匹配函式返回值的新元素。
.find() 獲得當前匹配元素集合中每個元素的後代，由選擇器進行篩選。
.first() 將匹配元素集合縮減為集合中的第一個元素。
.has() 將匹配元素集合縮減為包含特定元素的後代的集合。
.is() 根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。
.last() 將匹配元素集合縮減為集合中的最後一個元素。
.map() 把當前匹配集合中的每個元素傳遞給函式，產生包含返回值的新 jQuery 物件。
.next() 獲得匹配元素集合中每個元素緊鄰的同輩元素。
.nextAll() 獲得匹配元素集合中每個元素之後的所有同輩元素，由選擇器進行篩選（可選）。
.nextUntil() 獲得每個元素之後所有的同輩元素，直到遇到匹配選擇器的元素為止。
.not() 從匹配元素集合中刪除元素。
.offsetParent() 獲得用於定位的第一個父元素。
.parent() 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。
.parents() 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。
.parentsUntil() 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。
.prev() 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。
.prevAll() 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。
.prevUntil() 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。
.siblings() 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。
.slice() 將匹配元素集合縮減為指定範圍的子集。

 

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>
<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>輸出每個列表項的值</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方法將其轉換成原生Javascript陣列，再使用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); //輸出[object 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-link">回覆</a>
          </div>
        </div>
        <ul class="children">
          <li class="comment">
            <div class="comment-body">
            <p>第二層評論</p>
            <div class="reply">
              <a href="#" class=".comment-reply-link">回覆</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();
});

實現效果，驗證判斷題是否都有選擇

html

<ul id="ulSingle">
    
            <li class="liStyle">
                1.&nbsp;&nbsp;阿斯頓按時<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();
            }
        })

 ps:傳說中attr(“property”, “value”);在部分瀏覽器中不管用可以用prop，如果只是判斷可以用$(this).find(“ul>li>:checkbox:eq(” + i + “)”).is(“:checked”);

 

6.官方解釋
以下是官方的解釋：

jQuery.each(object, [callback])

概述
通用例遍方法，可用於例遍物件和陣列。

不同於例遍 jQuery 物件的 $().each() 方法，此方法可用於例遍任何物件。回撥函式擁有兩個引數：第一個為物件的成員或陣列的索引，第二個為對應變數或內容。如果需要退出 each 迴圈可使回撥函式返回 false，其它返回值將被忽略。

引數
objectObject
需要例遍的物件或陣列。

callback (可選)Function
每個成員/元素執行的回撥函式。

作者：Tyler Ning

出處：http://www.cnblogs.com/tylerdonet/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，如有問題，可以通過以下郵箱地址williamningdong@gmail.com
 聯絡我，非常感謝。


相關文章