js中each的用法
1.數(shù)組中的each
復(fù)制代碼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]相對于取每一個(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è)值；
按 Ctrl+C 復(fù)制代碼 按 Ctrl+C 復(fù)制代碼?
map方法:
將每個(gè):checkbox執(zhí)行return this.id；并將這些返回值，自動(dòng)的保存為jQuery對象，然后用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 ); }); 例遍對象，同時(shí)使用成員名稱和變量內(nèi)容。（i是成員名稱，n是變量內(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如下
?
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">請選擇</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 = 0for (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])?
概述?
通用例遍方法，可用于例遍對象和數(shù)組。?
不同于例遍 jQuery 對象的 $().each() 方法，此方法可用于例遍任何對象。回調(diào)函數(shù)擁有兩個(gè)參數(shù)：第一個(gè)為對象的成員或數(shù)組的索引，第二個(gè)為對應(yīng)變量或內(nèi)容。如果需要退出 each 循環(huán)可使回調(diào)函數(shù)返回 false，其它返回值將被忽略。?
參數(shù)?
objectObject?
需要例遍的對象或數(shù)組。?
callback (可選)Function?
每個(gè)成員/元素執(zhí)行的回調(diào)函數(shù)。
總結(jié)
以上是生活随笔為你收集整理的js中each的用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： git push 报错 Empty re
- 下一篇： OSS: cURL error: Emp