mui中的遍歷each()
阿新 • • 發佈:2021-07-28
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 }