【js】如何跳出jQuery的each循环

xiaoxiao2021-02-28  49

        首次碰到这样的问题,是在一个文本框的校验中,由于文本框的数量和有无都是未知可变的,所以在进行页面绘制的时候,所有的input框都有一个一样的name,然后如果存在的话,通过遍历来校验里面是否写入了内容。

        然而在对于数量校验的时候出现了问题,一般的校验代码如下:

if (!valid($("#packUnit").val())) {     layer.msg('请填写单位!', { icon: 2,         time: 1500, //1s后自动关闭     });     return false; }

通过对于id为指定内容的val取值,然后进行函数式的校验,最后判断返回的是true还是false来判断是否填写了内容,如果没有填写,则返回false,然后通过layer进行弹窗提示,并使整个函数结束,方法为return一个false。

但是,如果是一个批量的校验的话,需要用到for,或者foreach进行循环,在里面进行逐个的验证。这个时候,用return false并不能让整个函数结束,那他都做了什么呢?

$("input[name='serviceTimes']").each(function(){ if (!valid($(this).val())) { layer.msg('请填写服务次数!', { icon: 2, time: 1500, //1s后自动关闭 }); return false; } });

这样的话,我们在页面可以看到,没有经过验证的输入依然是可以提交的,但是却也弹出了提示。

说明在each里面的return false不是整个函数的return false,而是each的return false。那么,这个return false起到了什么用处呢?

我们可以写一个简单的程序:

$("input[name='serviceTimes']").each(function(){ if (!valid($(this).val())) { layer.msg('请填写服务次数!', { icon: 2, time: 1500, //1s后自动关闭 }); return false; } }); alert('结束');

依然是上面的代码在each后加入一个alert,我们运行一下就可以看到,在验证到为空的input框的时候,提示之后,就直接运行了alert的内容,显然,这里在each循环中的return false,相当于我们在java或者C#中的break。

那么continue需要怎么操作呢?在网上查询了一下,很简单,就是return true。

综上:

break:    return  false;

continue:  return true;

如此一来,这里的校验,加上一个标志变量,就可以正确跳出了:

var flag=0 $("input[name='serviceTimes']").each(function(){ if (!valid($(this).val())) { layer.msg('请填写服务次数!', { icon: 2, time: 1500, //1s后自动关闭 }); flag=1; return false; } }); if(flag==1){ return false; }

       上面的flag就是标志变量。

转载请注明原文地址: https://www.6miu.com/read-2621482.html

最新回复(0)