1. 程式人生 > 其它 >mui中的遍歷each()

mui中的遍歷each()

each()

each既是一個類方法,同時也是一個物件方法,兩個方法適用場景不同;換言之,你可以使用mui.each()去遍歷陣列或json物件,也可以使用mui(selector).each()去遍歷DOM結構。

第一種:

語法:
mui.each(obj,handler);

obj
Type: Array||JSONObj
需遍歷的物件或陣列;若為物件,僅遍歷物件根節點下的key
handler
Type: Function( Integer||String index,Anything element)
為每個元素執行的回撥函式;其中,index表示當前元素的下標或key,element表示當前匹配元素

example:
輸出當前陣列中每個元素的平方

1 var array = [1,2,3]
2 mui.each(array,function(index,item){
3      console.log(item*item);
4 });

第二種:
語法:
mui(selector).each(handler);

handler
Type: Function( Integer index,Element element)
為每個匹配元素執行的回撥函式;其中,index表示當前元素在匹配元素中的位置(下標,從0開始),element表示當前匹配元素,可用this關鍵字代替

example:
當前頁面中有三個欄位,如下:

 1 <div class="mui-input-group">
 2   <div class="mui-input-row">
 3     <label>欄位1:</label>
 4     <input type="text" class="mui-input-clear" id="col1" placeholder="請輸入">
 5   </div>
 6   <div class="mui-input-row">
 7     <label>欄位2:</label>
 8     <input type="
text" class="mui-input-clear" id="col2" placeholder="請輸入"> 9 </div> 10 <div class="mui-input-row"> 11 <label>欄位3:</label> 12 <input type="text" class="mui-input-clear" id="col3" placeholder="請輸入"> 13 </div> 14 </div>

提交時校驗三個欄位均不能為空,若為空則提醒並終止業務邏輯執行,使用each()方法迴圈校驗,如下:

 1 var check = true;
 2 mui(".mui-input-group input").each(function () {
 3   //若當前input為空,則alert提醒
 4   if(!this.value||trim(this.value)==""){
 5     var label = this.previousElementSibling;
 6     mui.alert(label.innerText+"不允許為空");
 7     check = false;
 8     return false;
 9   }
10 });
11 //校驗通過,繼續執行業務邏輯
12 if(check){
13   //.....
14 }