Как изменить цвет фона в div с помощью jQuery?

Question

Я хочу альтернативные цвета фона внутри 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> 

Спасибо,

Answer 1

Я проверил HTML/JQuery, который вы выложили, и это делает то, что вы ожидаете. Каждое нечетное Div имеет класс altBG.

Я бы предположил, что ваш CSS неверен, но поскольку это не было опубликовано, я не могу это подтвердить. если вы измените эту строку вашего JQuery из:

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

в

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

вы должны быть в состоянии видеть, что разметка и JQuery это нормально.

Надеюсь, это поможет.

Answer 2

Вы уверены, что у вас есть библиотека jquery? потому что ваш код HTML, CSS и jQuery хорош, но вам нужно добавить библиотеку, и ваш код будет работать нормально. вы можете скачать библиотеку JQuery здесь 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>