jQuery - 爲什麼我的循環運行兩次？

我有一個循環遍歷菜單的第一級LI項。我想檢測循環的結束，但是，我得到的打印似乎運行兩次。jQuery - 爲什麼我的循環運行兩次？

這裏是我的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

非常感謝您的幫助。 Michael。

來源

2011-09-12 Michael Giovanni Pumo

當dom準備好時會調用它嗎？ –

它似乎只爲我運行一次：http：//jsfiddle.net/UBVkn/在那裏可能有一些外部提供的腳本，可能會調用它兩次？ –

我檢查了它與jQuery 1.6.2，它運行在一次 – Anatoly

檢查this fiddle。它適用於每個瀏覽器。

也許你在某處調用它兩次，或者你有重複的代碼。

請注意，這不是在DOM就緒或頁面加載時調用它的問題，它不會改變任何內容。這也不是兩個元素具有相同的ID「內容」（輸出將是4的0,0 4的1，4的1，4 ...），無論如何它只是忽略第二個div。

檢查重複的HTML或JS代碼，或者調用兩次函數。

你應該把你的循環放在一個函數中，並在你的函數的開頭加上console.log('menu loop function');。看看它被調用了多少次。

來源

2011-09-12 12:27:22

好的，你的答案沒有直接回答，但它促使我檢查我的代碼，並且我在一個正在執行animate方法的回調函數的函數中有這個片段。這似乎是導致這個問題 - 不知道爲什麼，也可能太複雜，以顯示在這裏。不過，謝謝你對這個新鮮的眼睛。我沒有提到我的文章中的函數包裝，所以它沒有幫助，我沒有更具描述性。再次感謝。 –

沒問題，總是記得使用大多數瀏覽器的console.log（）功能來追蹤程序流。您將直接瞭解您的程序如何移動。 –

我只是懷疑你的代碼被調用兩次可能是因爲按鈕上的雙重綁定或類似的東西。我只是試圖重現你的問題，我只有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>

來源

2011-09-12 12:47:32

感謝您的幫助。你是對的，因爲它被稱爲兩次......在我的最後一個錯誤。你不是第一個，所以我不能給你答案，但我給了upvote。希望沒關係。再次感謝。 –

我使用:visible僞類元素的解決了這個問題，因爲在無論它是隱藏還是可見的每一個元素顯然.each循環。

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

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

});

來源

2016-12-29 23:38:45

jQuery - 爲什麼我的循環運行兩次？

回答

相關問題