3

ページにいくつかの div が定義されています

<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>
<div class="alternating">random text</div>

css プロパティを追加しました

.alternating:nth-child(even){
    background: #FF0000;
}

ページをロードすると、すべて問題なく表示され、偶数行に色が付けられます。しかし、この div の親に (Knockout と jquery を使用して) 新しい div を追加すると、新しく追加した行に正しい色が表示されません。つまり、最後の行が奇数 (色なし) の場合、新しく追加された div も色なしで表示されます。または、最後の div が偶数 (色あり) の場合、新しく追加された div も色付きで表示されます。

しかし、その後は再び正常に機能します。私の問題は、最初のdivの追加のみです。

何か案は？

4

1 に答える 1

2

これは、DOM の div から始めて、クリックで追加する小さなFIDDLEです。

関連: JS

$('.button').click(function() {
    $('.holder').append("<div class='inside'>dynamic div</div>");
});

関連CSS

.holder {
    width: 300px;
    height: 400px;
    border: 1px solid black;
}
.inside {
    height: 30px;
    border: 1px solid black;
}
.inside:nth-child(even) {
    background-color: blue;
}
于 2014-01-29T18:37:13.777 に答える