たとえば、5 つの DIV があります。
<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>
DIV の背景色を変更するにはどうすればよいですか?
たとえば、5 つの DIV があります。
<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>
DIV の背景色を変更するにはどうすればよいですか?
CSS3 - IE8 などの古いブラウザーでは機能しない
#container2 > div:nth-child(even){
background: yellow;
}
IE8でも動作するjQuery
$("#container > div:nth-child(even)").addClass("even");
このディスカッションも見つけました: IE8 and jQuery selectors
これは CSS3 と jQuery の両方のDEMO です。
$("#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>
何らかの理由で javascript オプションが必要な場合 (クラス以上のことをしたいのかもしれません)、jquery で each() 関数を使用できます。起動する機能の例を次に示します。
CSS
.redBox{
background-color: #ff0000;
}
Javascript
var i = 0;
$(".child").each(function(i){
if(i%2===0){
$(this).addClass("redBox");
}
i++;
});
デモを試すnth-child
div:nth-child(even){
background: yellow;
}
div{
background: red;
}
CSSでやるだけ?
#container child:nth-child(even) {background: #CCC}
CSS3 nth-child セレクターを使用することもできます。ここでサンプルを見つけることができます