4

20以上のアイテムのリストがあります。:nth-child(2n+1) セレクターを使用して背景色を変更します。(つまり、偶数アイテムは黒、奇数アイテムは白)。jQuery Isotope プラグインを使用して特定の項目を除外するボタンをクリックすると、除外したい項目に .isotope-hidden クラスが追加され、リスト項目の位置が 0,0 に、不透明度が 0 に変更されます。

これが発生すると、残りのアイテムには元の黒/白の背景色が残りますが、これはもはや順序付けられていません。

.isotope-hidden クラスを含まないアイテムで :nth-child(2n+1) セレクターを使用して css を「再描画」する方法を知っている人はいますか?

私は試した

#element tr:not(.isotope-hidden):nth-child(2n+1)

役に立たない。

どんな助けでも大歓迎です。ありがとうございました。

4

2 に答える 2

4

グループのフィルタリングされた選択を操作する場合、n 番目の子は直感に反する可能性があります。

.each() を使用して、その制限を回避します。

var count = 1;
$('#element tr:not(.isotope-hidden)').each(function(){
    if ( count++ % 2 == 1 ) $(this).css('background-color','white')
})
于 2012-10-26T04:57:07.190 に答える
2

CSS セレクター (特に疑似クラス、特に疑似クラス:not()の:nth-*()ファミリー) は「フィルター」として機能しません。ここに少し説明がありますが、振り返ってみると少しぎこちないようです。これがより良い説明です。

シーケンス内の単純なセレクターは、 1 つずつ書き込まれた順序では処理されません。むしろ、スタイルを要素に適用するために要素が一致しなければならない一連の条件であり、要素はこれらすべての条件をそのまま一緒に一致させる必要があります。または、それらを条件と呼ぶ代わりに記述子と呼ぶこともできますが、CSS セレクターに関しては「フィルター」を誤称と見なします。

あなたのセレクターは次のことを意味します：

#elementこの要素が次の範囲内にあり、次のすべての条件に一致する場合にのみ、この要素を選択します。

  • tr要素です
  • クラスを持たないisotope-hidden
  • 親の (2n+1) 番目の子です

そんな意味じゃない：

  1. の中身を見て#element
  2. すべてのtr要素を選択
  3. isotope-hiddenこれらの要素の中でクラスを持たない要素を除外します
  4. これらのフィルタリングされた要素のすべての (2n+1) 番目の子にスタイルを適用します

フィルターで除外した後にスタイルを「再描画」または再適用できたとしても、とにかく機能しません。これは、要素がisotope-hiddenクラスであるかどうか (またはtr! であるかどうかにかかわらず)、セレクターは、要素が DOM の親の最初の子である:not(.isotope-hidden)という事実を変更しないためです。 :nth-child(1)is:nth-child(2)は DOM での親の 2 番目の子であり、以降も同様です。

シーケンシャル フィルターが必要な場合、純粋な CSS セレクターではこれを行うことができません。この目的のために設計されたjQueryのフィルターメソッドを使用して、スタイルを適用するために使用できるそれぞれの要素にクラスを追加する必要があります。

$('#element tr').not('.isotope-hidden').filter(':even');

余談ですが、これはフィルター セレクターを使用して、単一の jQuery セレクターとして書き直すこともできます。

$('#element tr:not(.isotope-hidden):even');

ただし、同様の構文にもかかわらず、真の CSS セレクターと jQuery フィルターには大きな違いがあり、この回答で概説されています。

于 2012-07-27T17:19:17.280 に答える