CODEWITHSUNDEEP
jqueryjquery-selectors
Fuxi
Fuxi

Reputation: 7589

jquery selector question

i'm having this markup:

<UL>
    <LI class=odd>bla</LI>
    <LI class=even>bla</LI>
    <LI class=odd>bla</LI>
    <LI class=even>bla</LI>
    <LI class=odd>bla</LI>
    <LI class=even>bla</LI>
</UL>

my question: how can i select all lis like "with class odd OR even" using just one selector? i can't simply just use $("li") because the li's also might contain li's

thanks

Upvotes: 3

Views: 81

Answers (7)

SLaks
SLaks

Reputation: 887215

You don't need to speify those classes; you can simply write

$('ul.Root > li')

This will select all <li> elements that are direct children of the <ul> with class Root.
It won't select any nested <li>s.

You can select the parent <ul> using any class or ID selector you want.

Upvotes: 3

John Hartsock
John Hartsock

Reputation: 86862

Like Nick Spiers said but make sure you add a tag name for efficiency

$("li.even") // selects only even class
$("li.odd")  // selects only odd class
$("li.even, li.odd") // selects both odd and even

Note if you make a selector without the tag name and only the class. jQuery must iterate though all DOM elements to find matches. if you us the tagname then jQuery makes use of document.getElementsByTagname() to be more efficient.

Upvotes: 2

PeeHaa
PeeHaa

Reputation: 72642

Give your first ul a class or id:

<ul class="something">
</ul>

$('ul.something > li.even, ul.something > li.odd')

This only gets the highest li's

Upvotes: 0

dmackerman
dmackerman

Reputation: 2966

Give this a shot:

 $("li.odd, li.even")

By the way, you should use lower case for your tags.

Upvotes: 2

lonesomeday
lonesomeday

Reputation: 237817

Use the multiple selector:

$('li.odd, li.even');

Upvotes: 4

Dutchie432
Dutchie432

Reputation: 29160

firstly, you will want to change your tags to lowercase, and put your classes in quotes.

<ul>
    <li class="odd">bla</li>
    <li class="even">bla</li>
    <li class="odd">bla</li>
    <li class="even">bla</li>
    <li class="odd">bla</li>
    <li class="even">bla</li>
</ul>

Then you can select them this way

$('li.odd, li.even')

an even better way...

<ul id="theUl">
    <li class="odd">...</li>
    <li class="even">...</li>
    <li class="odd">...</li>
    <li class="even">...</li>
    <li class="odd">...</li>
    <li class="even">...</li>
</ul>

and

$('#theUl li')

Upvotes: 2

Nick Spiers
Nick Spiers

Reputation: 2354

class selectors

$("li.even") or $("li.odd")

To grab all li's with either of the 2 classes:

$("li.even, li.odd")

Upvotes: 1

Related Questions