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>

我使用了“＆gt;”只找到第一级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“内容”的元素的问题（输出将是4的0,0的4,1个中的4个，4个中的1个......），无论如何它只是忽略第二个div。

检查重复的HTML或JS代码，或者检查两次的函数。

您应该将循环放在函数中，并在函数的开头添加console.log('menu loop function');。看看有多少次被召唤。

Answer 2

我只是怀疑你的代码被调用两次可能是因为按钮上的双重绑定或类似的东西。我只是试图重现你的问题而我只有5行。 “可能”将代码直接附加到当前页面可能会使结果翻倍。我建议用console.log（...）（在webkit浏览器下）或alert（...）替换$（“＃content”）。append（...），看看你是否仍然得到了双重结果。（如果是这种情况，那么“追加”会弄乱你的“每个”循环，否则你只是调用你的两次函数）。这是我的虚拟测试片段：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var numNavItems = $("#navigation > li").size() - 1;
$("#navigation > li").each(function(i) {
    $(this).delay( i * 300 ).animate({ opacity: 1 }, 300);
    // This runs twice
    console.log("<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 );
    }
});
});
</script>
</head>
<body>
<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>
            </body>
</html>

Answer 3

我通过使用元素的:visible伪类解决了这个问题，因为显然.each遍历每个元素，无论它是隐藏还是可见。

$('li:visible').each(function(){

    /* it will loop on the elements which are visible */

});

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

3 个答案: