jQuery - strange function behaviour

Question

I have the UL list and the code which selects the all parents of the selected LI element ( https://stackoverflow.com/a/8883690/106616 ). Now, I want to clear the selection when I select the other LI element. To do so, I've created that code:

(simply, before select the new path, I iterate through the array to clear the previous selection, then I clear the array and while selecting the new path I add new items to that array)

    $('#nav li').click(function () {
        //clear the previous selection
        $.each(myArray, function (i, v) {
            console.log('loop: ' + v);
            $('#nav li a[href="' + v + '"]').css('background-color', 'Green');
        });

        myArray.lenght = 0;

        //add the new selection
        $(this).children('a').each(function (item) {
            myArray.push($(this).attr('href'));
            console.log('adding: ' + $(this).attr('href'));
            $(this).css('background-color', 'Red');
        });
    });

but, that code generates that output if I select the 1st path.

adding: #/1210

loop: #/1210

adding: #/1209

loop: #/1210

loop: #/1209

adding: #/1208

If I select the eg 2nd path, the output is:

loop: #/1210

loop: #/1209

loop: #/1208

adding: #/1188

loop: #/1210

loop: #/1209

loop: #/1208

loop: #/1188

adding: #/1187

I think the output should be (the 2nd path selection)

loop: #/1210

loop: #/1209

loop: #/1208

adding: #/1188

adding: #/1187

Can someone explain this for me ?

Answer 1

Your menu likely has nested li elements so when you click on one, the event bubbles up, triggering your callback and clearing previously selected elements. You can prevent the event from bubbling and just select all of the ancestor li elements to set their children's styles.

$('#nav li').click(function () {
    //clear the previous selection
    $('#nav li > a').css("background-color", "green");

    //add the new selection
    $(this).parentsUntil("#nav", "li").children("a").css("background-color", "red");

    return false; //Prevent the default action and prevent the event from bubbling up.
});

You may also want to use a class and define styles for those instead of using inline styles. It is more maintainable in the future if you decide you don't like the colors or want additional styling.

Answer 2

The click event originates from an a element. So catch it first before it bubbles to the first li , and make all the a s default. Then continue with my solution

$('#nav a').click(function() {
    $('#nav a').css('background-color', 'green'); 
});
$('#nav li').click(function () {
    $(this).children('a').css('background-color', 'red'); 
});

But it's much better to do this whole thing with CSS classes:

$('#nav a').click(function() {
    $('#nav a.current').removeClass('current'); 
});
$('#nav li').click(function () {
    $(this).children('a').addClass('current'); 
});

And in CSS:

#nav a { background-color: green; }
#nav a.current { background-color: red }