jquery 的 each 方法中 return 的坑
Chapter 0
在項目中使用 jquery 的 each 方法時想在 each 的循環中返回一個布爾類型的值於是掉進一個坑中...
Chapter 1
最初的代碼：
這里的代碼，雖然return 了，但是並未實際 return 值作為方法的返回值，而且還是繼續往后執行。 在網上查詢之后發現在 jquery 的 each 方法中如果 return true 相當於是 continue，而 return false 相當於是 break。
1 $(":checkbox[name='insurace-category']:checked").each(function (index, ele) { 2 var _item = $(".gift_option_item_" + $(ele).val()); 3 if (_item && _item.length > 0) { 4 var _premium = $.trim($(_item).find(".custom_inputbox").eq(0).val()); 5 var _selectElement = $(_item).find("select"); 6 if (_selectElement && _selectElement.length > 0) { 7 var _amount = $.trim($(_selectElement).val()); 8 if (!_amount) { 9 layer.msg("請選擇保額！", function () { 10 $(_selectElement).focus(); 11 }); 12 return false; 13 } 14 } 15 if (!_premium) { 16 layer.msg("請輸入保費！", function() { 17 $(_item).find(".custom_inputbox").eq(0).focus(); 18 }); 19 return false; 20 } 21 } 22 });
Chapter 2
我的解決方案如下：
修改后的代碼：
1 var _isInvalid = false; 2 $(":checkbox[name='insurace-category']:checked").each(function (index, ele) { 3 var _item = $(".gift_option_item_" + $(ele).val()); 4 if (_item && _item.length > 0) { 5 var _premium = $.trim($(_item).find(".custom_inputbox").eq(0).val()); 6 var _selectElement = $(_item).find("select"); 7 if (_selectElement && _selectElement.length > 0) { 8 var _amount = $.trim($(_selectElement).val()); 9 if (!_amount) { 10 layer.msg("請選擇保額！"); 11 $(_selectElement).focus(); 12 _isInvalid = true; 13 return false; 14 } 15 } 16 if (!_premium) { 17 layer.msg("請輸入保費！"); 18 $(_item).find(".custom_inputbox").eq(0).focus(); 19 _isInvalid = true; 20 return false; 21 } 22 } 23 }); 24 if (_isInvalid) { 25 return false; 26 }
我這里借助了一個變量來輔助判斷，當不滿足條件時設置為 true ,在循環外判斷這個變量的值，如果變量的值是 true 則證明又不合法的值，如果變量的值為 false，則證明所需要判斷的值都符合要求
Summary
jquery each 方法中的 return 實際上是不會 return 啊，在 jquery each 方法中 return false，可以借助一個外部變量來輔助實現我們想要的功能。