[前端技术]利用 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 循环，可以看成是一个小技巧，或者娱乐一下吧，实际项目中还是要根据情况而定。