Reputation: 12512
I have nested lists and I need to style every items. Normally I would do something like this:
$('#myList li').addClass('myClass');
However, because they are nested, I need to style just text, I suppose. How do I do this with jQuery? I thied this, but it did not work:
$('#myList li').text().addClass('myClass');
Here's HTML
<ul id="myList">
<li>
item 1
</li>
<li>
item 2
<ul>
<li>
asdasd
</li>
</ul>
</li>
</ul>
I NEED TO StYLE EVERY LIST ITEM
Upvotes: 1
Views: 264
Reputation: 20492
first level, direct child
$('#myList > li').addClass('myClass');
second level AND higher
$('#myList li li').addClass('myClass');
This subject is largely documented on jquery api selector page
Now your question has been edited : you need to style ALL list items :
CSS
li { /* will affect ALL list-items */}
Now you made it clearer :
Wrapping what's inside the LI element
$('li').wrapInner( "<span class='your-css-selector'></span>" );
Now you shown that you won't search more than a copy-paste solution :
Wrapping what's inside the LI element but not what resides in another inner-element
$('#myList li').each(function(){
$(this).contents().first().wrap("<span/>")
});
credit to user PLS copy-pasted from his comment.
Upvotes: 1
Reputation: 123749
Just wrap your text in a span and apply class on them. When you apply class on li
all of its contents gets impacted hence any descendants as well like nested ul under the li. Instead just wrap the texts in an element and apply class to them.
<ul id="myList">
<li>
<span>item 1</span>
</li>
<li>
<span>item 2</span>
<ul>
<li>
<span>asdasd</span>
</li>
</ul>
</li>
</ul>
and
$('#myList li > span').addClass("myClass");
With this you could just handle it using Css rule itself.
Upvotes: 1
Reputation: 3933
You cannot just style text.
You can specifically style the nested list items by doing this:
$('ul#myList > li > ul > li').addClass('myClass');
This will add the myClass
class to the item that has the text asdasd
in your example
Upvotes: 1