[前端技术]利用 try...catch 来跳出JQuery.each()

JQuery.each 遍历一个集合的时候，有时候我们不需要完全遍历，在找出需要的数据的时候，想跳出 JQuery.each 这个时候，问题出现了。

 

常规思维方式：

    <form id="form1" runat="server">
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $('p').each(function () {
                if ($(this).text() == "2") {
                    $(this).text('0');

                    /* 这里的 return 语句，和 continue 语句一样，跳出了本次循环，没有达到预期的目的。 */
                    return;
                } else {
                    alert($(this).text());
                }
            });
        });
    </script>

 

哈哈，常规思维方式写出的代码，return 语句，尽然做起了 containue 语句的事情，新手这里可能就迷糊了，一时半会反应不过来。

 

修改后的代码：

    <form id="form1" runat="server">
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {
            try {
                $('p').each(function () {
                    if ($(this).text() == "2") {
                        $(this).text('0');

                        /* 这里的 return 语句，和 continue 语句一样，跳出了本次循环，没有达到预期的目的。 */
                        /* return; */
                        throw 'someError';
                    } else {
                        alert($(this).text());
                    }
                });
            } catch (err) {
                if (err == 'someError') {
                    return;
                }
            }
        });
    </script>

 

 

结尾语：这里利用了 try...catch 语句，来跳出 JQuery.each 循环，可以看成是一个小技巧，或者娱乐一下吧，实际项目中还是要根据情况而定。