1

sのリストがあり<div>ます。それぞれ<div>にクラスがありzebraます。これまで、リストをストライピングするために以下を使用してきました。

.zebra:nth-child(2n) { /* colors */ }

<div>現在、これらの s の一部が class を持つように、フィルタリング機能を実装していますhidden。CSSを更新してみました

.zebra:not(.hidden):nth-child(2n) { /* colors */ }

しかし、それは効果がありませんでした。私は何が欠けていますか？.zebra <div>これらのセレクターを組み合わせて、表示中のみが考慮されるようにするにはどうすればよい:nth-child(2n)ですか?

これが私が説明していることのフィドルです。

更新：

  • 不明.hiddenな要素数と不明な要素総数があります。(リストはデータ駆動型であり、静的ではありません)。

私は本当にやりたくない：

  1. 表示されているリスト項目の色を変更するためだけに、フィルター コントロールがタッチされるたびに JavaScript を実行します。
  2. 非表示になっている要素を完全に削除します。これにより、それを再追加することは自明ではなくなります（afaact）。
4

4 に答える 4

1

Justin が提案したように要素を削除する代わりに、別のタグの要素に置き換えることができます。detailsたとえば、次のように使用できます。

var placemarker = document.createElement("details");
node.parentNode.replaceChild(placemarker, node);
placemarker.appendChild(node);

次に、 を使用する代わりに、 を:nth-child使用します:nth-of-type。

details { display:none; }
div.zebra:nth-of-type(2n) { /* colors */ }

要素を再表示するには、次のようにします。

placemarker.parentNode.replaceChild(placemarker.firstChild);

この静的な例を参照してください。

于 2012-12-09T09:24:30.287 に答える
0

jqueryを掘り下げても構わないなら..

$('#yourHiddenElement').remove();

CSSの色合いが交互になるように削除します。

http://jsfiddle.net/NYvcv/1/

非表示にする要素にクラス「hidden」を適用する代わりに、これを使用することをお勧めします。

于 2012-12-09T09:07:50.770 に答える
0

アイテムの数が限られていることがわかっている場合は、次の.hiddenようにすることができます。

.zebra2:nth-child(2n) {
    background: lightgrey;
}

.zebra2.hidden ~ .zebra2:nth-child(2n) {
    background: inherit;
}
.zebra2.hidden ~ .zebra2:nth-child(2n+1) {
    background: lightgrey;
}

.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n) {
    background: lightgrey;
}
.zebra2.hidden ~ .zebra2.hidden ~ .zebra2:nth-child(2n+1) {
    background: inherit;
}

等々。この特定の例は、非表示のアイテムが 2 つ以上ある場合に機能しなくなります。</p>

于 2012-12-09T09:14:37.127 に答える
0

考えられる解決策の 1 つ:

jQuery を使用して、.hidden要素の型をたとえば に変更し<li>ます。:nth-of-typeの代わりに使用し:nth-childます。

http://jsfiddle.net/Nb68T/1/

于 2012-12-09T09:26:09.953 に答える