jQuery - ループが2回実行されるのはなぜですか？

私は、メニューの第1レベルのLI項目を実行するループを持っています。私はループの終わりを検出したい、しかし、私が得るプリントアウトは2回実行されるようだ。だから、私のロジック火災倍jQuery - ループが2回実行されるのはなぜですか？

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); 

    } 

});

：

は、ここに私のJSです。なぜそれが私の入れ子リストになるのでしょうか？

ここでは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

感謝します。マイケル。

出典

2011-09-12 Michael Giovanni Pumo

domが準備完了しているときに呼び出されますか？ –

それは私のために一度実行されるように見えます：http://jsfiddle.net/UBVkn/それは2回呼び出すかもしれない提供されたスクリプトの外部に何かがありますか？ –

jQuery 1.6.2で確認しましたが、すぐに実行されます – Anatoly

チェックthis fiddle。すべてのブラウザで正常に動作します。

おそらく、あなたはどこか2回呼び出すか、コードが重複している可能性があります。

DOM準備完了またはページ読み込み時に呼び出す必要はありません。何も変更されません。同じID "content"（出力は4の0、4の0、4の1、4の1 ...）である2つの要素を持つことも問題ではなく、とにかく2番目のdivを無視します。

重複したHTMLまたはJSコード、または2回呼び出された関数をチェックします。

ループを関数に配置し、関数の先頭にconsole.log('menu loop function');を追加する必要があります。呼び出されている回数を確認してください。

出典

2011-09-12 12:27:22

OK、あなたの答えは直接答えられませんでしたが、私のコードをチェックするように促しました。アニメートメソッドのコールバック関数で実行されていた関数でこのスニペットを持っていました。それは問題を引き起こしているように思えました - なぜ、そしておそらくあまりにも複雑すぎてここに表示することはできません。しかし、これについての新鮮な目に感謝します。私は私のポストに関数のラップを言及しなかったので、それは私がより説明的ではなかったのを助けなかった。もう一度ありがとう。 –

問題はありませんが、ほとんどのブラウザのconsole.log（）機能を使ってプログラムの流れを追跡することを忘れないでください。プログラムがどのように動いているかを直接的に把握できます。 –

私は単純に、ボタンやそれに類するものに対する二重バインドのためにコードが二度呼び出されたと考えています。私はあなたの問題を再現しようとしましたが、私はわずか5行しか持っていません。現在のページに直接コードを追加すると結果が2倍になる可能性があります。 console.log（...）（Webkitブラウザの下）またはalert（...）で$（ "＃content"）append（...）を置き換え、二重の結果が得られるかどうかを確認することをお勧めします。（この場合、「追加」すると「それぞれの」ループが追加されます。それ以外の場合は、関数の2倍を呼び出すだけです）。、

<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

ご協力いただきありがとうございます。あなたはそれが2度呼ばれているという点で正しい...私の最後のバグ。あなたは最初ではなかったので私はあなたに答えを与えることはできませんが、私はupvoteを与えた。希望はOKです。再度、感謝します。 –

私は要素の:visible疑似クラスを使用することによって、この問題を解決するためにかかわらず、それは隠したり表示されているかどうかのすべての要素の上に明らかに.eachループ：はここに私のダミーテストスニペットです。

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

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

});

出典

2016-12-29 23:38:45

jQuery - ループが2回実行されるのはなぜですか？

答えて

関連する問題