Полоса класс для div

Question

У меня есть длинный список нескольких div... скажем, 20 div

Все завернуть в другой..

<div id="main">
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
 <div class="xyz"> text text </div>
.... etc
</div>

Мне нравится добавлять класс "серый" в один из двух div и сделать его зеброй! JQuery, пожалуйста!

Answer 1

$('.xyz:odd').addClass('grey');

Имейте в виду, что "серый" не является семантическим именем класса. Лучше назвать идентификатор "странным", "зеброй" или чем-то еще. Если вы решите и измените нечетный цвет на синий, ваше имя класса будет очень странным:P

Answer 2

JQuery делает это настолько просто, насколько это возможно:

$('#main>div.xyz:even').addClass('grey');

http://api.jquery.com/even-selector/

Answer 3

Если вам не нужны старые версии IE, вы можете сделать это, используя только CSS:

.xyz:nth-child(odd) {
  background-color: ...;
}

.xyz:nth-child(even) {
  background-color: ...;
}