14

私は次のような構造を持っています:

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

そして、動的ページ全体で数回繰り返されます。div クラス "post" の背景色を 2 色で交互にしたいのですが、CSS の nth-child 疑似クラスは直接連続するアイテムでしか機能しないようです。

div の背景色を変更する方法 (CSS、Javascript、jQuery など) はありますか?

4

6 に答える 6

27

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";
}
于 2011-05-30T18:57:41.043 に答える
7

jquery の方法:

$('.post:even').css('background-color','green');
$('.post:odd').css('background-color','red');
于 2011-05-30T18:57:31.230 に答える
2

通常、私が行うことは、バックエンドで「奇数」または「偶数」の 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; }
于 2011-05-30T19:02:24.380 に答える
1

jquery:oddと:evenセレクターを使用すると、非常に簡単に実行できます。

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

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

于 2011-05-30T18:59:15.833 に答える
1 
.post:nth-child(odd)

うまくいきませんか？

于 2011-05-30T18:59:41.077 に答える
0 
:even Selector

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

これがあなたを助けることを願っています

于 2011-05-30T18:58:38.110 に答える