adding class with jquery

Question

I use, a div container with different bg class like:

<!--Recipes-->
    <div class="PozVideos BgBlue RadiusTopTen">
        <div class="Caption">Yemek tarifleri</div>
        <ul>
            <li><a href=""><img src="" alt=""></a></li>
            <li><a href=""><img src="" alt=""></a></li>
            <li><a href=""><img src="" alt=""></a></li>
            <li><a href=""><img src="" alt=""></a></li>
            <li><a href=""><img src="" alt=""></a></li>
            <li><a href=""><img src="" alt=""></a></li>
        </ul>
    </div>
    <!--Recipes-->
<!--Videos-->
<div class="PozVideos BgPurple RadiusTopTen">
    <div class="Caption">Video Galeri</div>
    <ul>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
    </ul>
</div>
<!--Videos-->
<!--Gallery-->
<div class="PozVideos BgYellow RadiusTopTen">
    <div class="Caption">Fotoğraf Galerileri</div>
    <ul>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
        <li><a href=""><img src="" alt=""></a></li>
    </ul>
</div>
<!--Gallery-->

How can I add another different background class for each <li>, for example;

if PozVideos class has BgYellow class, I want to add BgYellowForLi class each li element in this div.containner(PozVideos).
if PozVideos class has BgPruple class, I want to add BgPurpleForLi class each li element in this div.containner(PozVideos).

Is that possible with jQuery?

You don't need to update your questions and tag them solved. Stack Overflow automatically distinguishes questions that have an accepted answer from questions that don't, with different styling. — David Hedlund
– David Hedlund, Commented Nov 16, 2012 at 10:44
Allright. i ll be carrefful another coming up question :) Thans @David. — Fatih Toprak
– Fatih Toprak, Commented Nov 16, 2012 at 10:45

David Hedlund · Accepted Answer · 2012-11-16 10:27:27Z

5

$('.PozVideos.BgYellow li').addClass('BgYellowForLi');

But you may be better off changing your CSS:

.PozVideos li {
    /* styles that apply for all li's in any PozVideos */
}

.PozVideos.BgYellow li {
   /* styles that apply only to yellow li's */
}

answered Nov 16, 2012 at 10:27

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

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

1 Comment

Fatih Toprak Over a year ago

Thanks for your quick and "great" answer @David. Fixed. I 'm gonna create new css line for each different li ;)

Tobias · Accepted Answer · 2012-11-16 10:47:29Z

4

$('.PozVideos.BgYellow').find('li').addClass('BgYellowForLi');

$('.PozVideos.BgPruple').find('li').addClass('BgPurpleForLi');

You can even write the code more like they way you describe what you want to do with some if statements

var $yellowElem = $('.PozVideos.BgYellow li');
if($yellowElem.length > 0) {
  $yellowElem.addClass('BgYellowForLi');
}

edited Nov 16, 2012 at 10:47

answered Nov 16, 2012 at 10:27

Tobias

8839 silver badges17 bronze badges

3 Comments

Fatih Toprak Over a year ago

Thanks for your quick replay @Tobias. Fixed.

Fatih Toprak Over a year ago

Should i use .find methot too ?

Tobias Over a year ago

You don't have to, I wrote it out of speed because I'm used to using it. But the selector David Hedlund uses is correct too with '.PozVideos.BgYellow li'. Find is used if you know the parent and you want to make sure you only search in it's child's.

Guffa · Accepted Answer · 2012-11-16 10:29:18Z

0

Yes, that's possible, and not complicated:

"if PozVideos class has BgYellow class, i want to add BgYellowForLi class each li element in this div.containner(PozVideos)":

$('.PozVideos.BgYellow li').addClass('BgYellowForLi');

"if PozVideos class has BgPruple class, i want to add BgPurpleForLi class each li element in this div.containner(PozVideos)":

$('.PozVideos.BgPurple li').addClass('BgPurpleForLi');

answered Nov 16, 2012 at 10:29

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Johan · Accepted Answer · 2012-11-16 10:29:58Z

0

Dynamic solution:

$('#PozVideos').each(function(){

    var classList = $(this).prop('class').split(/\s+/);

    $(this).find('li').addClass(classList[1] + 'ForLi');
});

answered Nov 16, 2012 at 10:29

Johan

35.4k62 gold badges191 silver badges309 bronze badges

1 Comment

David Hedlund Over a year ago

PozVideos isn't an ID, but I assume that was just a typo in your selector. Other than that, it feels hacky to make assumptions on the order of classes within the string. If I add a new class to an element, I generally don't expect to break a script. If it really needs to be dynamic, to cater for a big number of colors, say, I'd consider setting a data-color="BgYellow" or something.

Jai · Accepted Answer · 2012-11-16 10:30:20Z

0

This can be achieved like this too:

var bgParent = $('.BgYellow');

$('li',bgParent).css({"background":"blue"});

answered Nov 16, 2012 at 10:30

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Tobias Over a year ago

You are using wrong selector for the parent, it should have the class PozVideos aswell. like '.PozVideos.BgYellow'

Collectives™ on Stack Overflow

adding class with jquery

5 Answers 5

1 Comment

3 Comments

Comments

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

1 Comment

1 Comment

Related