jQuery$.each循環遍歷詳解，各類取值對比，$.each遍歷數組、對象、Dom元素、二維數組、雙層循壞、類json數據等等

時間 2019-11-08

標籤 jquery 循環遍歷詳解各類取值對比數組對象 dom 元素二維雙層 json 數據等等欄目 JQuery 简体版

原文原文鏈接

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

函數	描述
.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()	將匹配元素集合縮減爲指定範圍的子集。


<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
 $(function(){
     
    //設置默認選中項
    $("select:eq(0)").val(2);

    //若是多選，將返回一個數組，其包含所選的值。
    $.each($("select:eq(0)").val(),function(i,v){
      //$("select:eq(0)").val()應返回一個數組
      //遍歷數組有5種方式
      console.log(v);
      console.log(數組名[i])
      //能用$(this)或者this的function()函數裏就不用傳值了
      alert($(this)[0]);//不理解但能取出值
      //=========this取值================
      //$(this)[0] == this = v
      alert(this);
      alert(this[0]);//不理解但能取出值
    });
    //獲取Select選中匹配元素的當前值,即[即便多選也只]取得第一個匹配元素的val內容,是字符串因此要split()轉成數組
    $.each($("select:eq(0) :selected").val().split(),function(i,v){
      //一樣5種方式
      console.log(v);
    });

    //例遍dom元素好比selcted選項
    $.each($("select:eq(0) :selected"),function(i,v){//遍歷選中的
    //$.each($("select:eq(0) option"),function(i,v){//遍歷所有元素
        console.log(v);//遍歷出<option value="2">香蕉</option>相似這種html元素
        //注意取值
        console.log(v.name);
        console.log(v.value);
        console.log(v.text);
        //=========this取值=================
        console.log(this)// 和上面取法相似，this至關於v
        console.log(this.name);
        console.log(this.value);
        console.log(this.text);
        //=======$(this)取值============
        //$(this)[0] == this = v
        alert($(this).val());
        alert($(this).text())======alert($(this).html());
    });
    
    //====================JQuery中使用each，若是須要退出 each 循環可以使回調函數返回 return false;===========================
    //第一個爲對象的成員名稱或數組的索引，第二個爲對應變量值或內容
   //例遍數組，同時使用元素索引和內容。（i是索引，n是內容）
   $.each([0,1,2], function(i, n){
        //遍歷數組有5種方式
        alert( "Item #" + i + ": " + n );//取值有兩種方式一、數組名[i]  二、n
        alert(數組名[i]);
        //=========$(this)取值================
        alert($(this)[0]);//不理解但能取出值
        //=========this取值================
        alert(this);
        alert(this[0]);//不理解但能取出值
      });

   //例遍對象，同時使用成員名稱和變量內容。（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($("input:hidden"), function(i,val){
      alert(val); //輸出[object HTMLInputElement]，由於它是一個表單元素。
      alert(i); //輸出索引爲0，1，2，3
      //注意底下取值
      alert(val.name); //輸出name的值
      alert(val.value); //輸出value的值
      //=========this取值=================
      console.log(this)// 和上面取法相似，this至關於val
      console.log(this.name);
      console.log(this.value);
      console.log(this.text);
      //=========$(this)取值============
       //$(this)[0] == this = v
      alert($(this).val());
      alert($(this).text())======alert($(this).html());
   });



    //==================================================================
  //事實證實雙層循壞this,$(this)無論用，只能用function()裏的函數value
  //循壞二維數組
   $.each([[1, 4, 3], [4, 6, 6], [7, 20, 9]]  , function(i, item){  
      $.each(item,function(k,v){//item至關於取每個一維數組， 
          console.log(v);    
           });   
      }); 
   //循壞多個對象【經常使用在json串中】
   $.each( [{ name: "a", lang: "b" },{ name: "John", lang: "JS" }], function(i, n){
          $.each(n,function(k,v){
              alert( "Name: " + k + ", Value: " + v );
          });
        }); 
   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方法，很方便。*/

  });
 </script>
</head>
<table>
    <tr>
          <td>
              <!--multiple設定下拉框能夠多選，size設定下拉框不呈現下拉方式，-->
              <select size="12" id="One" multiple="multiple">
                    <option value='1'>蘋果</option>
                    <option value="2">香蕉</option>
                    <option value="3">草莓</option>
                    <option value="4">橘子</option>
              </select>
          </td>
          <td>
                  <input type="button" value=">>>"><br>
                  <input type="button" value="&nbsp;>&nbsp;"><br>
                  <input type="button" value="&nbsp;<&nbsp;"><br>
                  <input type="button" value="<<<"><br>

          </td>
          <td>
                 <select size="12" id="two" multiple="multiple">
                      <option value="5">葡萄</option>
                 </select>
                   
          </td>

          <td>
                  <input type="button" value="&nbsp;up&nbsp;"><br><br>
                  <input type="button" value="down"><br>
          </td>
    </tr>
</table>