изменение цвета нечетных / четных DIVs в html с помощью javascript

например, мы 5 DIVs:

<div id="container" >
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>

Как я могу изменить цвет фона даже DIVs?

6
css design html javascript

5 ответов

Если вы по какой-то причине хотели вариант javascript (может быть, вы хотите сделать больше, чем просто класс?) вы можете использовать функцию each () в jquery. здесь является примером функционирования для загрузки!

в CSS

.redBox{
    background-color: #ff0000;
}​

в JavaScript

var i = 0;
$(".child").each(function(i){
    if(i%2===0){
        $(this).addClass("redBox");
    }
    i++;
});
7

С помощью CSS3 - не работает в старых браузерах, таких как IE8, в

#container2 > div:nth-child(even){
  background: yellow;
}

jQuery который тоже работает в IE8

$("#container > div:nth-child(even)").addClass("even");

Я также нашел это обсуждение:IE8 и селекторы jQuery

здесь демо CSS3 и jQuery оба

$("#container1 > div:nth-child(even)").addClass("even");
.even {
  background-color: yellow
}

#container2>div:nth-child(even) {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
jQuery:
<div id="container1">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>
<hr/> CSS3:
<div id="container2">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>
9

попробовать nth-child демо 

div:nth-child(even){
background: yellow;
}

div{
 background: red;
}
6

просто сделайте это с помощью CSS?

#container child:nth-child(even) {background: #CCC}
2

вы также можете использовать CSS3 nth-child селектор. Вы можете найти образцы на здесь

2