當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js中each的用法

發布時間：2023/12/3 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 js中each的用法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文轉載自： https://www.cnblogs.com/xingguo/p/3999663.html 作者：xingguo 轉載請注明該聲明。

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這個值；

按 Ctrl+C 復制代碼按 Ctrl+C 復制代碼

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.  阿斯頓按時<label id="selectTips" style="display: none" class="fillTims">請選擇</label><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><br /></li></ul>

js代碼

//驗證單選題是否選中$("ul#ulSingle>li.liStyle").each(function (index) {//選項個數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])?

概述?
通用例遍方法，可用于例遍對象和數組。?

不同于例遍 jQuery 對象的 $().each() 方法，此方法可用于例遍任何對象。回調函數擁有兩個參數：第一個為對象的成員或數組的索引，第二個為對應變量或內容。如果需要退出 each 循環可使回調函數返回 false，其它返回值將被忽略。?

參數?
objectObject?
需要例遍的對象或數組。?

callback (可選)Function?
每個成員/元素執行的回調函數。

總結

以上是生活随笔為你收集整理的js中each的用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： git push 报错 Empty re
下一篇： OSS: cURL error: Emp