Home/ Questions/Q 6569389
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:37:14+00:00

I have a loop that runs through first level LI items of a menu.

  • 0

I have a loop that runs through first level LI items of a menu. I want to detect the end of the loop, however, the print out I get seems to run twice.

Here’s my 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 );

    }

});

So, my logic fires twice. Not sure why, could it be my nested list?

Here’s the 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>

I used the “>” to find only the first level LI’s.

It prints:

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

Many thanks for your help.
Michael.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check this fiddle. It works ok on every browser.

    Probably you are calling it twice somewhere, or you have duplicated code.

    Note that it’s not a matter of calling it on DOM ready or page load, it won’t change anything. It’s also not a problem of having two elements with the same ID “content” (the output would be 0 of 4, 0 of 4, 1 of 4, 1 of 4 …), and anyway it simply ignore the second div.

    Either check for duplicated HTML or JS code, or a function called two times.

    You should put your loop in a function and add console.log('menu loop function'); at the beginning of your function. See how many times it’s being called.

    • 0