使用方法：JavaScriptを使用して要素を追加するときの背景色に合わせてnth-child（）を使用する

Question

:nth-child()セレクタが見つかりました。私は自分のサイトに表示するときにdivに背景色を変えることができるようにしたかったのです。ここ

<div class="background-color">Content</div> <!-- White background-color --> 
<div class="background-color">Content</div> <!-- Black background-color --> 
<div class="background-color">Content</div> <!-- White background-color --> 
<div class="background-color">Content</div> <!-- Black background-color --> 

というように、このよう 。そのすべてが素晴らしい作品です。私が持っている唯一の問題は、JS関数を使って新しいdivを追加すると、それは交互になりませんbackground-color。常に白色の背景色を持ちます。 JS関数内では、同じCSSクラスとすべてを追加しますが、まだ動作していません。

ユーザーが追加した新しいdivを正しい色で表示する方法はありますか？

Answer 1

あなたがアプリケーションのこの種のためにnth-child(even)を利用することができます

.background-color { 
    background-color: white; 
} 

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

https://jsfiddle.net/86nkhwkz/

すべての子を、代替背景色をします（彼らはクラスbackground-colorのすべてをしていると仮定した場合）。

Answer 2

私たちが修正できるように、常にコードを表示してください。

function add() { 
 
    var $d = $("<div>"); 
 
    $d.addClass("background-color").html("Content"); 
 
    $("#wrapper").append($d); 
 
}

#wrapper > div { 
 
    background-color: white; 
 
    padding: 1em; 
 
    color: red 
 
} 
 
#wrapper > div:nth-child(2n) { 
 
    background-color: black 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="background-color">Content</div> 
 
    <div class="background-color">Content</div> 
 
    <div class="background-color">Content</div> 
 
    <div class="background-color">Content</div> 
 
</div> 
 
<button onclick="add()">Add</button>