javascript - jQuery - 为什么我的循环运行两次？

Question

我有一个循环遍历菜单的第一级 LI 项。我想检测循环的结束，但是，我得到的打印输出似乎运行了两次。

这是我的 JS:

var numNavItems = $("#navigation > li").size() - 1;

$("#navigation > li").each(function(i) {

    $(this).delay( i * 300 ).animate({ opacity: 1 }, 300);

// This runs twice
    $("#content").append("<p>Loop number: " + i + " out of " + numNavItems + "</p>");

    if( i == numNavItems) {
        //$("#navigation li").css({ "opacity" : 1 });
        //alert("End! Number of items = " + numNavItems + ". Last item = " + i );

    }

});

所以，我的逻辑触发了两次。不知道为什么，会不会是我的嵌套列表？

这是 HTML...

<ul id="navigation">
                <li class="selected"><a href="./">Home</a></li>
                <li><a href="./portfolio/">Portfolio</a>

                    <ul>
                        <li><a href="#">Cosmos</a></li>
                        <li><a href="#">Remora</a></li>
                        <li><a href="#">Caspian</a></li>
                        <li><a href="#">Megaway</a></li>
                    </ul>

                </li>
                <li><a href="./philosophy/">Philosophy</a></li>
                <li><a href="./about/">About</a></li>
                <li><a href="./contact/">Contact</a></li>
            </ul>

我使用“>”仅查找第一级 LI。

它打印:

Loop number: 0 out of 4

Loop number: 1 out of 4

Loop number: 2 out of 4

Loop number: 3 out of 4

Loop number: 4 out of 4

Loop number: 0 out of 4

Loop number: 1 out of 4

Loop number: 2 out of 4

Loop number: 3 out of 4

Loop number: 4 out of 4

非常感谢您的帮助。 迈克尔。

Answer 1

检查 this fiddle .它适用于所有浏览器。

可能您在某处调用了两次，或者您有重复的代码。

请注意，这不是在 DOM 就绪或页面加载时调用它的问题，它不会改变任何东西。具有相同 ID“内容”的两个元素也不是问题(输出将是 0 of 4、0 of 4、1 of 4、1 of 4 ...)，无论如何它只是忽略第二个 div。

要么检查重复的 HTML 或 JS 代码，要么检查函数调用两次。

您应该将循环放在一个函数中，并在函数的开头添加 console.log('menu loop function');。查看它被调用了多少次。