Jquery的each(function(){})里：return false相当于break； return ture相当于continue

celineWong7

发布于 2023-10-16 17:27:15

1360

发布于 2023-10-16 17:27:15

文章被收录于专栏：web前端踩坑web前端踩坑

突然有点想不起Jq的each()回调函数里，return true 和 return false的行为表现了。所以写下demo记录下。

1. 结论

在each(function(){})中： return true(return) 相当于continue,跳出当次循环； return false 相当于 break,跳出当前循环。

2. 案例验证

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

    var testData = [
        {
            "id":1,
            "name":"aa",
            "age": 8

        },
        {
            "id":2,
            "name":"bb",
            "age": 12

        },
        {
            "id":3,
            "name":"cc",
            "age": 18

        },
        {
            "id":5,
            "name":"ee",
            "age": 1

        },
        {
            "id":4,
            "name":"dd",
            "age": 22

        },

    ]

    $(testData).each(function(){
        if (this.age >= 18) return true;
        console.log(this); // 返回 年龄 8/12/1
    });

    $(testData).each(function(){
        if (this.age >= 18) return false;
        console.log(this);// 返回 年龄 8/12
    });
    </script>

</body>
</html>

由于参考文章都提及需要通过try-catch来跳出函数，于是我又尝试each遍历标签jq对象，结果发现上面的结论是ok的。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div>8</div>
    <div>12</div>
    <div>18</div>
    <div>1</div>
    <div>22</div>

    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">

    $('div').each(function(){
        if (Number($(this).text()) >= 18) return true;
        console.log('test-for-return-true: ',$(this).text()); // 返回  8/12/1
    });

    $('div').each(function(){
        if (Number($(this).text()) >= 18) return false;
        console.log('test-for-return-false: ',$(this).text());// 返回  8/12
    });
    </script>

</body>
</html>

参考文章：

jquery中each函数的return
Jquery的each里面用return false代替break； return ture 代替continue 两篇文章都提到了：、 return true(return) 相当于continue,跳出当次循环； return false 相当于 break,跳出当前循环。但又都提到需要用try-catch来跳出函数。有点奇怪，个人测试return false;在满足条件的时候就会跳出each循环。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-07-14，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery