jquery 的 each 方法中 return 的坑

最新推荐文章于 2021-07-02 11:34:21 发布

转载最新推荐文章于 2021-07-02 11:34:21 发布 · 171 阅读

文章标签：

本文探讨了使用jQuery的each方法时遇到的一个常见误区，即在循环体内部使用return语句并不能真正终止整个each循环，而是根据return的真假值分别对应continue和break行为。通过实例演示如何正确地利用外部变量来解决这一问题。

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，可以借助一个外部变量来辅助实现我们想要的功能。