Jquery run each nested li and add class

Question

<ul id="demo3" class="menu_list">
<li><a href="#">Home</a></li>
<li class="open"><a href="#"><span></span>1</a>
<ul>
<li><a href="#">Product list</a></li>
<li><a href="#">Add product</a></li>
</ul>
</li>
</ul>

I need on $(window).load loop all my menu and find if exist class open if yes then add active to it.

I have made such code:

$(window).load(function() {

    $('#demo3 > li').each(function(i){
       if($('#demo3 > li').hasClass('open'))
        {
            $(this).addClass('active');
        }
    }); 

});

unfortunatelly these add to all li active class not only to open class. Before opening these post I spent some time trying to solve these problem myself now I need your help

Answer 1

You old code;

$(window).load(function() {
// loops thoght each li
    $('#demo3 > li').each(function(i){
        // for each li we loop throguh, it creates a new jQuery object of all ('#demo3 > li') - wrong!
        if($('#demo3 > li').hasClass('open')) {
            // then adds class to the original loop's this (which is the current li element) - corrent.
            $(this).addClass('active');
        }
    }); 
});

Change it to;

$(window).load(function() {
    $('#demo3 > li').each(function(index, el){
        if($(this).hasClass('open')){
            $(this).addClass('active');
        }
    }); 
});

You used $(this) when trying to add class but didn't when checking if it had the class initially. So on your line where you check to see if it has the open class, you are actually creating a new jQuery object which will be an array of #demo3 li's, and not the current li you are iterating over.

As you can see I've added in the 2 params to the each function. index being the current index of the itteration, el being the current html element (not a jQuery object). You could replace $(this) with $(el) in this example.

But all in all, what you can do is only select those li's which have the 'open' class, and then just add 'active' to all of them;

$(window).load(function() {
    $('#demo3 > li.open').addClass('active');
});

Answer 2

Just use

 $('#demo3 > li.open').each(function(i){
          $(this).addClass('active');
 });

In this way you will only select the li with the class open

Answer 3

The first answer certainly works. I would try to reduce it down to a single to be called on $(window).load, with:

$(window).load(function () {
    $('#demo3 > li.open').addClass("active");
}

To be honest though, this might not be the best option, depending on if you want to do more than just add the .active class to the specified element. In that case, the previously used .each notation could be necessary:

$(window).load(function () {
    $('#demo3 > li.open').each( function(){
        $(this).addClass("active");

        // And do additional stuff
    });
});

Hope this helps! Let me know if you have any questions.

Answer 4

Use:

$(function(){
    $('#demo3 li.open').addClass('active');
});