如何使用jQuery在div中交替背景色？

我想在一个div中添加一个备用的背景色。我已经通过下面的代码完成了这项工作：

我希望第一行显示bgcolor，下一行显示其他颜色

我试过了，但没用。代码如下：

<script type="text/javascript">
    $(document).ready(function() {
        $(".rowBg div:odd").addClass("altBg");
    });
</script>

/*CSS*/
div.rowBg div { clear:both; padding:0; overflow:hidden }
div.altBg {  background-color:#eee !important;  overflow:hidden; padding:5px 0 } 
<!--HTML-->
<div class="rowBg">
            <div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>
            <!--Row 2-->
            <div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>

            </ul>           
            </span>
            </div>

            </div>

$（文档）.ready（函数（）{
$（.rowBg div:odd”）.addClass（“altBg”）；
});
/*CSS*/
div.rowBg div{clear:both；padding:0；overflow:hidden}
div.altBg{背景色：#eee！重要；溢出：隐藏；填充：5px 0}
A.







A.

---

谢谢，

我已经测试了您发布的HTML/jquery，它正在做您期望的事情。 每个单数Div都有一个altBG类

我想说的是，你的CSS是错误的，但由于还没有发布，我不能证实这一点。 如果将jquery的这一行更改为：

$(".rowBg div:odd").addClass("altBg");

到

您应该能够看到您的标记和jquery是正常的

---

希望这有帮助。

您确定添加了jquery库吗？因为您的HTML、CSS和jQuery代码很好，但您需要添加库，您的代码也可以正常工作。 您可以从这里下载jQuery库

div.rowBg div{clear:both；padding:0；overflow:hidden}
div.altBg{背景色：#eee！重要；溢出：隐藏；填充：5px 0}
$（文档）.ready（函数（）{
$（.rowBg div:odd”）.addClass（“altBg”）；
});
A.







A.







A.







A.







A.

也许CSS:odd和：偶可以做到这一点，我相信一定有CSS。你也可以粘贴吗？@TCHdvlp:你在考虑第n个孩子（奇数）/

:n个孩子（偶数）

。我不知道

：odd

/

：偶数

伪类。我认为：偶数/：odd内置在jQuery中，在另一篇stackoverflow文章[here][1][1]中特别解释了这一点：啊，我可以看到您现在已经添加了css。因此

div.rowBg div.altBg{background color:#eee}

应该足够具体，以便强制使用新样式。

$(".rowBg div:odd").css({"background-color":"#ff0000"})

<style type="text/css">
div.rowBg div { clear:both; padding:0; overflow:hidden }
div.altBg {  background-color:#eee !important;  overflow:hidden; padding:5px 0 } 
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".rowBg div:odd").addClass("altBg");
    });
</script>

<div class="rowBg">
            <div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>
            <!--Row 2-->
            <div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>

            </ul>           
            </span>
            </div>
<div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>
<div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>
<div>
            <!--Row1-->
            <span class="alphabets">A</span>
            <span class="itemNames">
            <ul>
            <li><a href="../locate/refine.html?N=4294963558">Acer America</a></li>
            <li><a href="../promotions/index.html?page_id=3703">Acronis</a></li>
            <li><a href="../locate/refine.html?N=4294966145">Adaptec</a></li>
            <li><a href="../promotions/index.html?page_id=3163">Adobe</a></li>
            <li><a href="../promotions/index.html?page_id=4402">AirWatch</a></li>
            </ul>           
            </span>
            </div>

            </div>