CODEWITHSUNDEEP
jquery
Kashif Waheed
Kashif Waheed

Reputation: 31

add class to li with reference in jquery

i am working on a menu where i have a class in

here is my html

           <ul class="dropdown-menu">
       <li>
             <a href="http://localhost/final/?page_id=53">Comber Noil</a>
           </li>
           <li>
         <a href="http://localhost/final/?page_id=41" class="nav-active">Social</a>
           </li>
      </ul>

here is my jquery

           $(document).ready(function() {
          $('a.nav-active').parent().addClass('myclass');    
           });

Upvotes: 0

Views: 84

Answers (1)

jmar777
jmar777

Reputation: 39699

Your JavaScript looks correct (assuming you're waiting for a DOM ready event), but your markup is broken. You need an opening <li> tag before your .nav-active link:

<ul class="dropdown-menu">
    <li>
        <a href="http://localhost/final/?page_id=53">Comber Noil</a>
    </li>
    <li>
        <a href="http://localhost/final/?page_id=41" class="nav-active">Social</a>
    </li>
</ul>

Edit: based on some of the comments below, it looks like what you want is that...

When a user clicks a link inside the .dropdown-menu, you want to crawl back up to the root of the dropdown and add a nav-active class to the nested a element inside that li?

Assuming so, here's the JavaScript to do that:

$('.dropdown-menu > li > a').click(function(e) {
    e.preventDefault();
    $(this).closest('.dropdown').children('a').addClass('nav-active');
});

Hope that helps!

Upvotes: 2

Related Questions