How do I alternate the background color in a div using jQuery?

Question

I want an alternate background colors inside of a div. Which I have done through this code below:

I want my first row to be present with a bgcolor and the next row with an alternate color.

I tried but it didn't work. Here is the code:

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

Thanks,

Answer 1

I have tested the HTML/jquery which you have posted and it is doing what you are expecting. Each odd Div has a class of altBG.

What I would suggest is that your CSS is wrong but as that has not been posted, I can't confirm that. if you change this line of your jquery from:

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

to

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

you should be able to see that your markup and jquery is ok.

Hope this helps.

Answer 2

Are you sure that you have added jquery library? because your HTML, CSS and jQuery code is fine but you need to add library and your code will work fine. you can download jQuery library from here jQuery

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