CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
santa
santa

Reputation: 12512

Adding class to list with jQuery

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

Answers (3)

Milche Patern
Milche Patern

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

PSL
PSL

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

qwertynl
qwertynl

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

Related Questions