Question

我使用了一个具有不同bg类的div容器，如：

<!--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-->

如何为每个<li>添加另一个不同的背景类，例如;

如果PozVideos类有BgYellow类，我想在这个div.containner（PozVideos）中添加BgYellowForLi类每个li元素。
如果PozVideos类有BgPruple类，我想在这个div.containner（PozVideos）中添加每个li元素的BgPurpleForLi类。

这可以用jQuery吗？

Answer 1

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

但是你可能最好更改你的CSS：

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

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

Answer 2

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

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

你甚至可以编写代码，就像你描述你想用if语句做什么一样

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

Answer 3

是的，这是可能的，而不是复杂的：

“如果PozVideos类有BgYellow类，我想在这个div.containner（PozVideos）中添加BgYellowForLi类每个li元素”：

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

“如果PozVideos类有BgPruple类，我想在这个div.containner（PozVideos）中添加BgPurpleForLi类每个li元素”：

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

Answer 4

动态解决方案：

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

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

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

Answer 5

这也可以这样实现：

var bgParent = $('.BgYellow');

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

用jquery添加类

5 个答案: