jQuery中each方法的使用詳解
概述:
each() 方法規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)。
返回 false 可用于及早停止循環(huán),相當(dāng)于break。
返回 true 可以結(jié)束本次循環(huán),相當(dāng)于continue。
語(yǔ)法:
$(selector).each(function(index,element){ }) index - 選擇器的 index 位置 element - 當(dāng)前的元素(也可使用 "this" 選擇器) $(selector).each(function(){ }) $.each(array,function(Key,Value){ })
1.遍歷js數(shù)組
$(function(){ var array=["aaa","bbb","ccc"]; $.each(array,function(i,j){ alert(i+":"+j); //i表示索引,j代表值 }); })
2.遍歷Object對(duì)象
var obj = new Object(); obj.name="zs"; $.each(obj, function(name, value) { alert(this); //this指向當(dāng)前屬性的值,等價(jià)于value alert(name); //name表示Object當(dāng)前屬性的名稱 alert(value); //value表示Object當(dāng)前屬性的值 });
3.遍歷JSON對(duì)象
var json ={"name":"zhangSan","role":"student"}; $.each(json,function(key,value){ alert(key+":"+value); });
4.遍歷由多個(gè)JSON對(duì)象組成的數(shù)組
var json =[{"name":"Amy","role":"student"},{"name":"Tom","role":"student"}]; $.each(json, function(index, value) { alert("index="+index+"\n" +"name:"+value.name+"\n"+"role:"+value.role+"\n"); });
5.遍歷jQuery對(duì)象
<head> <meta charset="utf-8" /> <title>遍歷jQuery對(duì)象</title> <script src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function(){ $("input[type='button']").bind("click",function(){ $("li").each(function(){ alert($(this).text()) }); }); }); </script> </head> <body> <input type="button" value="觸發(fā)事件"/> <ul> <li>first</li> <li>second</li> </ul> </body>
總結(jié)
以上所述是小編給大家介紹的jQuery中each方法的使用詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
淺談jquery上下滑動(dòng)的注意事項(xiàng)
下面小編就為大家?guī)?lái)一篇jquery上下滑動(dòng)的注意事項(xiàng)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10Enter回車切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼兼容各大瀏覽器
這篇文章主要介紹了Enter回車切換輸入焦點(diǎn)實(shí)現(xiàn)思路與代碼并兼容各大瀏覽器,需要的朋友可以參考下2014-09-09zTree樹(shù)形菜單交互選項(xiàng)卡效果的實(shí)現(xiàn)方法
下面小編就為大家分享一篇zTree樹(shù)形菜單交互選項(xiàng)卡效果的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12JQuery 實(shí)現(xiàn)文件下載的常用方法分析
這篇文章主要介紹了JQuery 實(shí)現(xiàn)文件下載的常用方法,結(jié)合實(shí)例形式分析了jQuery的GET方式、POST方式及HTML5 Blob對(duì)象等常見(jiàn)的文件下載機(jī)制、原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2019-10-10關(guān)于echarts在節(jié)點(diǎn)顯示動(dòng)態(tài)數(shù)據(jù)及添加提示文本所遇到的問(wèn)題
這篇文章主要介紹了關(guān)于echarts在節(jié)點(diǎn)顯示動(dòng)態(tài)數(shù)據(jù)及添加提示文本所遇到的問(wèn)題,需要的朋友可以參考下2018-04-04超輕量級(jí)的基于jquery的三級(jí)展開(kāi)列表
今天自己寫了個(gè)輕量級(jí)的三級(jí)展開(kāi)菜單,如果需要可以在增加一級(jí)別,一般公司的項(xiàng)目三級(jí)都足夠了。2011-04-04基于Jquery的動(dòng)態(tài)創(chuàng)建DOM元素的代碼
jquery動(dòng)態(tài)創(chuàng)建頁(yè)面元素,mark一下,以備以后查詢時(shí)使用。以創(chuàng)建div和input為例。2010-12-12