Альтернативный цвет фона div

У меня есть следующая структура:

<div class="wrapper"...>
   <a href="#"...>blah</a>
   <div class="post"...>stuff</div>
</div>

И это повторяется на динамической странице несколько раз. Я хотел бы чередовать цвета фона класса div «post» с двумя цветами, но псевдокласс CSS nth-child, похоже, работает только с элементами, которые являются непосредственно последовательными.

Есть ли способ (CSS, Javascript, jQuery и т. д.), которым я могу чередовать цвета фона div?


javascript jquery css dom pseudo-class
person redgem    schedule 30.05.2011    source источник

Ответы (6)


arrow_upward
27
arrow_downward

Селекторы jQuery :odd и :even очень удобны:

$(".post:even").css("background-color","blue"); 
$(".post:odd").css("background-color","red");

HTML:

<div class="wrapper">
   <a href="#">blah</a>
   <div class="post">stuff</div>
</div>
<div class="wrapper">
   <a href="#">blah</a>
   <div class="post">stuff</div>
</div>
...

http://jsfiddle.net/thomas4g/uaYd9/2/

РЕДАКТИРОВАТЬ:

Не-jQuery, быстрый способ JS:

var posts = document.getElementsByClassName("post");
for(var i=0;i<posts.length;i++) {
  posts[i].classList.add(i % 2 === 0 ? "even" : "odd");
  //or
  posts[i].style["background-color"] = i % 2 === 0 ? "blue" : "red";
}
person Thomas Shields    schedule 30.05.2011
comment
Спасибо, у меня, кажется, проблемы с этим, хотя. Я включил jQuery и использовал это: $(document).ready(function() { $(".post:even").css("background-color","blue"); $(".post:odd").css("background-color","red"); });, но это не работает. - person redgem; 30.05.2011
comment
@Rodney, какую версию jQuery вы используете? ссылка, которую я разместил, работает для вас? - person Thomas Shields; 30.05.2011
comment
@ Родни, хм, странно. какой браузер вы используете? Вы урезали свой код только до того, что указано в моем ответе (чтобы устранить любые возможные помехи)? - person Thomas Shields; 30.05.2011
comment
У меня может быть конфликтующий/более высокий прецедент CSS. Я просмотрю свой код и вернусь к вам. Огромное спасибо! - person redgem; 30.05.2011
comment
Да, просто конфликт CSS. Отлично работает сейчас! Спасибо! - person redgem; 30.05.2011
comment
@Rodney круто - рад помочь! - person Thomas Shields; 30.05.2011

arrow_upward
7
arrow_downward

способ jquery:

$('.post:even').css('background-color','green');
$('.post:odd').css('background-color','red');
person gion_13    schedule 30.05.2011

arrow_upward
2
arrow_downward

Обычно я назначаю класс css «нечетный» или «четный» на задней панели. Например, если страница динамически генерируется в PHP, я бы сделал что-то вроде:

for ($i = 0; $i < count($rows); $i++) {
  $css_class = 'wrapper ';  // Elements can have multiple css classes
  $css_class .= $i % 2 == 0 ? 'row_odd' : 'row_even';
  // generate html using class="$css_class"...
}

Затем определите в своем классе цвета, которые должны быть у чередующихся элементов div.

.row_odd { background-color: white; }
.row_even { background_color: #e0e0ff; }
person King Skippus    schedule 30.05.2011
comment
К сожалению, я не могу использовать PHP на этой странице. Спасибо хоть! - person redgem; 30.05.2011

arrow_upward
1
arrow_downward

Это можно сделать с помощью селекторов jquery :odd и :even довольно легко:

$(".wrapper div.post:odd").addClass('odd'); 
$(".wrapper div.post:even").addClass('even');

http://jsfiddle.net/niklasvh/fULRZ/

person Niklas    schedule 30.05.2011

arrow_upward
1
arrow_downward 

.post:nth-child(odd)

Не работает для вас?

person Jrod    schedule 30.05.2011
comment
Неа. Я считаю, что элементы div .post должны быть строго последовательными (т. Е. Никакие родительские элементы div не должны их обертывать). - person redgem; 30.05.2011
comment
Английский мой первый язык. Впрочем, я не имел в виду, что они тупые. Просто пытаюсь прояснить CSS, который они использовали ранее, но он не работает. Я думаю, что это был безобидный вопрос, возможно, лучше задать его в комментарии, но, тем не менее, безобидный. - person Jrod; 30.05.2011

arrow_upward
0
arrow_downward 

:even Selector

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

Я надеюсь, что это поможет вам

person zod    schedule 30.05.2011