jQuery add class to certain elements

Question

I have a multilevel menu like this :

<ul>
  <li>item 1
    <ul>
      <li>item 1.1</li>
      <li>item 1.2</li>
    </ul>
  </li>
  <li>item 2</li>
  <li>item 3
    <ul>
      <li>item 3.1</li>
      <li>item 3.2</li>
    </ul>
  </li>
  <li>item 4</li>
</ul>

In jQuery I have

$("#divId ul li:odd").addClass("blue");
$("#divId ul li:even").addClass("green");

The problem is that jQuery adds the class to all the lists. I would like jQuery to just add the class to the first level (ul > li.class) and NOT the inner childs (ul > li > ul > li.class)

Thanks

You have a multilevel menu like THAT? Do go on! Maybe with a question? — zombat
– zombat, Commented Jan 6, 2010 at 7:29

rosscj2533 · Accepted Answer · 2010-01-06 18:00:53Z

3

This should work:

$("#divId ul:first > li:odd").addClass("blue"); 
$("#divId ul:first > li:even").addClass("green");

It will add the classes to the children of the first ul tag found in divId.

answered Jan 6, 2010 at 18:00

rosscj2533

9,3437 gold badges42 silver badges58 bronze badges

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

Comments

Jason · Accepted Answer · 2010-01-06 17:54:17Z

2

you could try:

$("#divId ul li:not(#divId ul li ul li):odd").addClass("blue");
$("#divId ul li:not(#divId ul li ul li):even").addClass("green");

answered Jan 6, 2010 at 17:54

Jason

52.7k38 gold badges139 silver badges188 bronze badges

Comments

bobwah · Accepted Answer · 2010-01-06 11:35:57Z

1

I'm going to use assumptions here and you you know what they say about them ;)

If you want to add specific classes to all of the ul items then:

$('ul').addClass('class-addition');

and you can style the list items in the same way.

If you want to add classes to the ul within a li you can use:

$('li > ul').addClass('class-addition');

using the parent > child selectors.

I'd have a look at the selectors documentation provided by Branislav to find exactly what you want and use firebug to test the results though.

answered Jan 6, 2010 at 11:35

bobwah

2,5865 gold badges34 silver badges51 bronze badges

Comments

Branislav Abadjimarinov · Accepted Answer · 2010-01-06 09:30:50Z

0

Can you, please, give more information on your case. From what I see you need simple select and add class. You can find information on jquery selectors here and on addClass method here

answered Jan 6, 2010 at 9:30

Branislav Abadjimarinov

5,1513 gold badges37 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery add class to certain elements

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related