Adding class to list with jQuery

Question

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

You can not add class to the text. You need to have a wrapper for it either with 'div' or 'span'. — Caner Akdeniz
– Caner Akdeniz, Commented Nov 14, 2013 at 20:57

Community · Accepted Answer · 2017-05-23 12:05:04Z

1

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.

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Nov 14, 2013 at 20:57

Milche Patern

20.7k6 gold badges39 silver badges53 bronze badges

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

3 Comments

santa Over a year ago

I suppose I would have to wrap text manually? .wrapInner will wrap everything, including next UL.

PSL Over a year ago

@santa You can do it this way jsfiddle.net/3REp3 But if you can modify your markup consider doing that instead of modifying the html using the js.

Milche Patern Over a year ago

It's not chrismass yet, so PLEASE, do some effort and read api.jquery.com/wrapInner and the other 'selector' documentation. You will find BY YOURSELF that you can wrap what you select. Something like $('selector').not(thatotherthing) ... etc.

qwertynl · Accepted Answer · 2013-11-14 20:57:16Z

1

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

answered Nov 14, 2013 at 20:57

qwertynl

3,9331 gold badge24 silver badges43 bronze badges

Comments

PSL · Accepted Answer · 2013-11-14 20:59:02Z

1

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.

answered Nov 14, 2013 at 20:59

PSL

124k21 gold badges257 silver badges243 bronze badges

Collectives™ on Stack Overflow

Adding class to list with jQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related