CODEWITHSUNDEEP
jquerycss
Fatih Toprak
Fatih Toprak

Reputation: 1007

adding class with jquery

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;

Is that possible with jQuery?

Upvotes: 0

Views: 93

Answers (5)

Tobias
Tobias

Reputation: 883

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

Upvotes: 4

Jai
Jai

Reputation: 74738

This can be achieved like this too:

var bgParent = $('.BgYellow');

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

Upvotes: 0

Johan
Johan

Reputation: 35213

Dynamic solution:

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

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

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

Upvotes: 0

Guffa
Guffa

Reputation: 700730

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

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129832

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

Upvotes: 5

Related Questions