Javascript 如何为具有特定类的嵌套和同级div设置交替颜色。

我有一个嵌套列表，每个列表项都有一个带有类R的容器div 我正在尝试将交替颜色应用于交替div。问题是，具有类的div并不总是同级的

这是我的html:

<ul>
    <li>
        <div class="R">Bat</div>
        <div class="R">description</div>
    </li>
    <li>
        <div class="R">Cat</div>
    </li>
    <li>
        <div class="R">Rat</div>
        <ul>
            <li>
                <div class="R">one
                    <div class="R">blah</div>
                    <div class="R">blah blah</div>
                </div>
            </li>
            <li>
                <div class="R">two
                    <div>
            </li>
            <li>three</li>
        </ul>
    </li>
</ul>

球棒
描述


猫


老鼠


一
废话
废话


二

三

这就是我想要的外观（我使用内嵌css对颜色进行了编码）

球棒
描述


猫


老鼠


一
废话
废话


二

试试这个：您可以使用

:odd

和

:偶数

jQuery选择器获得奇数和偶数div，并相应地应用背景色。请参阅下面的代码

$（函数（）{
$（'ul div.R:odd'）.addClass（'oddColor'）；
$（'ul div.R:even'）.addClass（'evenColor'）；
});
.oddColor{
背景色：红色；
}
.evenColor{
背景颜色：绿色；
}



球棒
描述


猫


老鼠


一
废话
废话


二

三


试试这个：您可以使用
:odd
和
:偶数
jQuery选择器获得奇数和偶数div，并相应地应用背景色。请参阅下面的代码


$（函数（）{
$（'ul div.R:odd'）.addClass（'oddColor'）；
$（'ul div.R:even'）.addClass（'evenColor'）；
});
.oddColor{
背景色：红色；
}
.evenColor{
背景颜色：绿色；
}



球棒
描述


猫


老鼠


一
废话
废话


二

三



$（'div.R'）。每个（函数（索引）{
$（this.css（'background-color'，index%2==0？'#cc0'：'#0cc'）；
});



球棒
描述


猫


老鼠


一
废话
废话


二

三



$（'div.R'）。每个（函数（索引）{
$（this.css（'background-color'，index%2==0？'#cc0'：'#0cc'）；
});



球棒
描述


猫


老鼠


一
废话
废话


二

三



$（文档）.ready（函数（）{
$（“.R:偶数”）.css（“背景色”、“绿色”）；
$（.R:odd”）.css（“背景色”、“红色”）；
});



球棒
描述


猫


老鼠


一
废话
废话


二

三



$（文档）.ready（函数（）{
$（“.R:偶数”）.css（“背景色”、“绿色”）；
$（.R:odd”）.css（“背景色”、“红色”）；
});



球棒
描述


猫


老鼠


一
废话
废话


二

三


为不同的颜色使用不同的类别。请提供尝试的解决方案，为什么它们不起作用，以及预期的结果。谢谢@那是行不通的。。我的意思是我在动态添加元素。。例如：用户可以添加项目类型A或项目类型B。如果我将类分配给类型A:red和类型B:green。因为用户可以添加两次类型A，所以它仍然不起作用。@Tushar是的，jQuery没有问题。虽然CSS解决方案更可取。“这就是我希望它看起来的样子（我有内嵌CSS的harcoded颜色）”在
一个
父元素将
子元素的
背景色设置为
红色
，
诸如此类诸如此类！重要信息
在
css
中设置？对不同的颜色使用不同的类别。请提供尝试的解决方案，为什么不起作用，以及预期的结果。谢谢@那是行不通的。。我的意思是我在动态添加元素。。例如：用户可以添加项目类型A或项目类型B。如果我将类分配给类型A:red和类型B:green。因为用户可以添加两次类型A，所以它仍然不起作用。@Tushar是的，jQuery没有问题。虽然CSS解决方案更可取。“这就是我希望它看起来的样子（我有内嵌CSS的harcoded颜色）”在
一个
父元素将
子元素的
背景色设置为
红色
，
诸如此类诸如此类！重要信息
在
css
中设置？