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?

• David Hedlund: 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.
• Fatih Toprak: Allright. i ll be carrefful another coming up question :) Thans @David.

Answer 1

$('.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 */
}

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

Answer 2

$('.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');
}

• Fatih Toprak: Thanks for your quick replay @Tobias. Fixed.
• Fatih Toprak: Should i use .find methot too ?
• Tobias: 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.

Answer 3

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');

Answer 4

Dynamic solution:

$('#PozVideos').each(function(){
 var classList = $(this).prop('class').split(/\s+/);
 $(this).find('li').addClass(classList[1] + 'ForLi');
});

• David Hedlund: 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.

Answer 5

This can be achieved like this too:

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

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