快捷導(dǎo)航

詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹

更新時(shí)間：2017年01月09日 09:47:06 作者：鄭小超

這篇文章主要介紹了詳解Jquery 遍歷數(shù)組之$().each方法與$.each()方法介紹 ,具有一定的參考價(jià)值，有興趣的可以了解一下。

$().each()

對(duì)于這個(gè)方法，在dom處理上用的比較多,如果一個(gè)html頁面上面有多個(gè)checkbox，這時(shí)用$().each來處理checkbox是比較不錯(cuò)的;

$("input[type='checkbox']").each(function(i){
  $(this).attr("checked",true);
});

回調(diào)函數(shù)里面的i在此處代表input集合傳遞過去的索引(也就是正在遍歷的input元素的索引)；

但是這段代碼只用到了input集合的索引

<head>
  <title></title>
  <script src="jquery-1.9.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $('input:hidden').each(function (index, obj) {
        alert(obj.name + "..." + obj.value);
      });
    });
  </script>
</head>
<body>
<input type="hidden" value="1" name="a"/>
<input type="hidden" value="2" name="b"/>
<input type="hidden" value="3" name="c"/>
</body>

上面這段代碼用到了input集合的索引,有用到了input集合的dom對(duì)象,可以通過該對(duì)象,拿到其對(duì)應(yīng)的屬性如：name，value等；

$.each()方法

1. 該方法處理一維數(shù)組,代碼如下:

$.each(["aaa","bbb","ccc"],function(index,value){
   alert(i+"..."+value);
});

結(jié)果是輸出 0...aaa 1...bbb 2...ccc

2.該方法處理二維數(shù)組,代碼如下：

    $(function () {
      $.each([["aaa", "bbb", "ccc"], ["ddd", "eee", "fff"], ["ggg", "hhh", "iii"]], function (index, item) {
        alert(index + "..." + item);
        //輸出0...aaa,bbb,ccc 1...ddd,eee,fff 2...ggg,hhh,iii  這時(shí)的index為數(shù)組下標(biāo),item相當(dāng)于取這二維數(shù)組中的每一個(gè)數(shù)組
        $.each(item, function (index, itemobj) {
          alert(index + "....." + itemobj);
        });
      });
      //輸出0...aaa,bbb,ccc 0...aaa 1...bbb 2...cccc 1...ddd,eee,fff 0...ddd 1...eee 2...fff 2...ggg,hhh,iii 0...ggg 1...hhh 2...iii
    });

3.該方法處理json數(shù)組,代碼如下:

    $(function () {
      var json = [{ name: "張三", sex: "男" }, { name: "李四", sex: "女" }, { name: "王五", sex: "gay"}]; //自定義一個(gè)json數(shù)組
      $.each(json, function (index, obj) {
        alert(index + "..." + obj.name+"..."+obj.sex);
      });
    });

json為后臺(tái)傳遞過來的json數(shù)組，each遍歷該數(shù)組,index通常為數(shù)組里面對(duì)象的索引,而obj為當(dāng)前遍歷到的對(duì)象

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于jquery的15款幻燈片插件
幻燈片效果通常用于展示相冊(cè)圖片或特色推薦內(nèi)容。一個(gè)漂亮的幻燈片更能吸引訪客的注意力。本文里面，收集了15款jquery幻燈片插件，讓你的圖片展示更漂亮，讓你的特色內(nèi)容更吸引人。
2011-04-04
jQuery獲取復(fù)選框被選中數(shù)量及判斷選擇值的方法詳解
這篇文章主要介紹了jQuery獲取復(fù)選框被選中數(shù)量及判斷選擇值的方法,結(jié)合實(shí)例形式分析了jQuery操作復(fù)選框進(jìn)行判定與統(tǒng)計(jì)的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2016-05-05
jquery插件jbox使用iframe關(guān)閉問題
最近做需要用到彈出窗口，發(fā)現(xiàn)JBox不錯(cuò)，可以支持iframe,但是發(fā)現(xiàn)個(gè)問題，在iframe中添加一個(gè)按鈕點(diǎn)擊此按鈕
2009-02-02
jQuery中 prop() attr()使用詳解
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？關(guān)于它們兩個(gè)的區(qū)別，這里談?wù)勎业男牡?，我的心得很簡單：?duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。對(duì)于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。
2015-05-05
jQuery Chosen通用初始化
這篇文章主要介紹了jQuery Chosen通用初始化,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2017-03-03
JQUERY 對(duì)象與DOM對(duì)象之兩者相互間的轉(zhuǎn)換
jquery對(duì)象的相應(yīng)方法DOM對(duì)象不能使用，而DOM對(duì)象的相應(yīng)方法jquery也不能使用。所以在具體項(xiàng)目中要注意Jquery對(duì)象與DOM對(duì)象的轉(zhuǎn)換問題
2009-04-04
jquery禁用右鍵示例
這篇文章主要介紹了jquery禁用右鍵示例,需要的朋友可以參考下
2014-04-04
jQuery實(shí)現(xiàn)滑動(dòng)星星評(píng)分效果(每日分享)
jQuery星星評(píng)分制作5顆星星鼠標(biāo)滑過評(píng)分打分效果，可取消評(píng)分結(jié)果，重新打分。下面通過代碼給大家講解的非常詳細(xì)，需要的的朋友參考下
2019-11-11
jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果，如何實(shí)現(xiàn)上拉刷新下拉加載更多頁面的呢？下面小編通過下面內(nèi)容給大家介紹jQuery模擬原生態(tài)App上拉刷新下拉加載更多頁面及原理，需要的朋友可以參考下
2015-08-08
jQuery中頁面返回頂部的方法總結(jié)
本文給大家總結(jié)了關(guān)于jquery中頁面返回頂部的方法小結(jié)，以及各個(gè)方法的優(yōu)缺點(diǎn)介紹，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2016-12-12