0

非表示のアイテムと表示されているアイテムのリストがあります。可視アイテムにはアクティブというクラスがあります。:nth-child(odd)or -:nth-of-type(even)をこれらの特定の可視アイテムにのみ適用しようとしていますが、結果は完全にランダムです。

私は期待しています：黄、緑、黄、緑、黄。

結果: 黄、黄、緑、黄、緑、緑。

クラス名とノードでフィルタリングできると思いました。しかし、明らかにそうではありません。

    <ul>
      <li>hide</li>
      <li class="active">visible</li>
      <li>hide</li>
      <li class="active">visible</li>
      <li class="active">visible</li>
      <li>hide</li>
      <li class="active">visible</li>
      <li class="active">visible</li>
      <li>hide</li>
      <li class="active">visible</li>
    </ul>

スタイル：

li {
   background-color:red;
   display:none;
}

li.active {
  display:block;
}

li.active:nth-child(odd) {
  background-color:yellow;
}

li.active:nth-child(even) {
  background-color:green;
}

これを回避する方法はありますか？

編集:jQueryやその他のライブラリは使用できず、ネイティブjsのみを使用できます。実際には、画像とテキストで満たされた 50 以上のリスト項目があるため、DOM から非表示のものを削除して元に戻すことは、おそらく良い考えではありません。

4

3 に答える 3

2

空のリスト項目にも色が付けられているので、これは理にかなっています。

最も洗練された解決策: 空のリスト要素のレンダリングを削除します。

もう 1 つの可能性は、ドキュメントが読み込まれた後に空のリスト要素を削除するために jQuery を使用することです。

于 2012-05-09T19:08:35.990 に答える
2 
  <li></li>                // odd , display none   
  <li class="active"></li> // even                 green
  <li></li>                // odd , display none
  <li class="active"></li> // even                 green
  <li class="active"></li> // odd                  yellow
  <li></li>                // even, display none
  <li class="active"></li> // odd                  yellow
  <li class="active"></li> // even                 green
  <li></li>                // odd , display none
  <li class="active"></li> // even                 green

何が意味をなさないのですか？あなたの空<li>の s は何ですか? そこで別のことをすることを検討してください...それらが間隔のための場合は、「スペーサー」クラスをいくつかのLIに追加し、それにマージン/パディングを配置します。

行の色を表示内容に応じて動的に変更したい場合、純粋な CSS ではこれを行うことはできません。ただし、jQueryを使用すると簡単です。次のようになります。

$( '#ul li:visible' ).each( function( i ){
    $( this )[ (1&i) ? 'addClass' : 'removeClass' ]( 'active' );
} )
于 2012-05-09T19:15:18.530 に答える
0

Firefoxで動作します。

<link rel="stylesheet" type="text/css" href="LI.css" />
Test
<ul>
<li>1</li>
<li class="active">2</li>
<li>3</li>
<li class="active">4</li>
<li class="active">5</li>
<li>6</li>
<li class="active">7</li>
<li class="active">8</li>
<li>9</li>
<li class="active">A</li>
</ul>

2、4、8 & A は緑の背景を取得しますが、1、3、および 9 は表示されません (表示: なし)

于 2012-05-09T19:27:25.983 に答える