Jquery addclass issue

Question

Here is my html structure

  <ul>
    <li>Main 1
        <ul>
            <li><a href=''>Child 1-1</a></li>
            <li><a href=''>Child 2-1</a></li>
            <li><a href=''>Child 3-1</a></li>
            <li><a href=''>Child 4-1</a></li>
        </ul>   
    </li>
    <li>Main 2
        <ul>
            <li><a href=''>Child 1-2</a></li>
            <li><a href=''>Child 2-2</a></li>
            <li><a href='' class='selected'>Child 3-2</a></li>
            <li>Child 4-2</li>
        </ul>   
    </li>
    <li>Main 3</li>
</ul>

Now What I need is that on document.ready jquery checks that which <li>'s <a> has class 'selected'. If it finds one it put class 'mainselected' on its parent <li> and a class 'listul' on it <ul> so that the code will look like that

<ul>
    <li>Main 1
        <ul>
            <li><a href=''>Child 1-1</a></li>
            <li><a href=''>Child 2-1</a></li>
            <li><a href=''>Child 3-1</a></li>
            <li><a href=''>Child 4-1</a></li>
        </ul>   
    </li>
    <li class='mainselected'>Main 2
        <ul class='listul'>
            <li><a href=''>Child 1-2</a></li>
            <li><a href=''>Child 2-2</a></li>
            <li><a href='' class='selected'>Child 3-2</a></li>
            <li>Child 4-2</li>
        </ul>   
    </li>
    <li>Main 3</li>
</ul>

Can anyone please give me a jquery code for this.

Thanks

fehays · Accepted Answer · 2011-10-26 16:21:47Z

2

$(function(){     
  $('li a.selected').closest('ul').addClass('listul')
    .parent().addClass('mainselected');    
});

answered Oct 26, 2011 at 16:21

fehays

3,1671 gold badge26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shawn Chin · Accepted Answer · 2011-10-26 16:29:04Z

1

$(function() {  // on DOM ready
    $("ul > li > ul > li > a.selected")     // explicitly search in nested ul
        .closest("ul").addClass("listul")   // assing ".listul" to parent ul
        .parent().addClass("mainselected"); // assign ".mainselected" to containing li
});

edited Oct 26, 2011 at 16:29

answered Oct 26, 2011 at 16:21

Shawn Chin

87.4k20 gold badges168 silver badges193 bronze badges

Collectives™ on Stack Overflow

Jquery addclass issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related