Append div dynamically to li if the class is not present

Question

Below is the ul li format for my menu

<li class="dropdown active list-unstyled clearfix">
       <a target="_self" href="/marine-offshore/en/worldwide/sustainability/"><span>Sustainability</span></a>
        <div class="dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12"><div class="nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs"></div></div>
    </li>
    <li class="dropdown active list-unstyled clearfix">
       <a target="_self" href="/marine-offshore/en/worldwide/sustainability/"><span>Sustainability</span></a>

    </li>

In the above code in First LI have div class="dropdown-menu" . But for the second LI i dont have the div class="dropdown-menu" to append that div I have used below code but its getting appending to both the li .

if( !$('.mainnavigation li.dropdown').hasClass('dropdown-menu') ) {
       $('.mainnavigation .dropdown').append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");
}

Please help me out to append the div only to the second li alone. Thanks in advance

Answer 1

In your javascript test, you are testing if the LI element has the class "dropdown-menu".

You can test the presence of the div you want with this code :

 $('.mainnavigation li.dropdown').each(function(){
   if($(this).children('.dropdown-menu').length == 0){
$(this).append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");
}
});

Demo : http://jsfiddle.net/gxnnwy3r/

Answer 2

Access the second element in the jQuery way.

if( !$('.mainnavigation li.dropdown').eq(1).hasClass('dropdown-menu') ) {
       $('.mainnavigation .dropdown').eq(1).append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");
}

Answer 3

You can access direct second element like:

USE eq() function.

$('.mainnavigation .dropdown').eq(1).append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");

Answer 4

You need to do this:

if($('.mainnavigation li.dropdown .dropdown-menu').length === 0 ) {
     $('.mainnavigation .dropdown').append("<div class='dropdown-menu second-nav-subList fivecol-nav col-lg-12 col-md-12 col-sm-12 col-xs-12'><div class='nav-promotions col-lg-4 col-md-4 col-sm-12 hidden-xs'></div></div>");
}

it will check if .mainnavigation li.dropdown has any element like .dropdown-menu and if length is 0 that (means there is no element) only then add it in .