2

に複数のリスト項目があり、クラス<ul>を含む項目のグループがあるとします。.aggregatedこのような：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
</ul>

これらの要素のグループごとに異なるスタイルを設定できるようにする必要があります<li>。基本的には、各グループに異なる背景色を与えます。したがって、最初のグループは<li class="aggregated">青色の背景、2 番目のグループは黄色の背景などになります。JS に依存したくなく、任意のクラス名や ID を追加したくありません。すでにあるコードを使用したいと思います。

可能？もしそうなら、どのように？

4

4 に答える 4

3

わかりました、これは可能です。しかし、それは非常に壊れやすく、予測可能なクラスが存在することに依存しています。また、最新のブラウザーが必要です。

/* presentational stuff */

li ~ li.aggregated,
li.aggregated ~ li.aggregated {
    background-color: #f90;
}

li.aggregated ~ li:not(.aggregated) ~ li.aggregated {
    background-color: #ffa;
}

li.aggregated ~ li:not(.aggregated) ~ li.aggregated ~ li:not(.aggregated) ~ li.aggregated {
    background-color: #cfc;
}​

JS フィドルのデモ。

于 2012-05-30T21:39:52.790 に答える
2

前の要素がないクラスを持つアイテムを見ると、グループ番号を定義し、それに応じてインクリメントすることができます。

var groupNum = 1;
// Get all <li>
$("ul li").each( function() {
    var element = $(this);
    if( element.hasClass("aggregated") ) {
        if( !element.prev().hasClass("aggregated") ) {
            // Prev element was not in this group. increment the group number
            groupNum++;
        }
        switch( groupNum ) {
            case 1:
                // group #1 styles
                // element.css( "background-color", "#FFF" );
                break;
            case 2:
                // group #2 styles
                // element.css( "background-color", "#00F" );
                break;
        }
    }
} );
于 2012-05-30T21:21:58.430 に答える
1

異なる bgColor に異なるクラスを使用するか、グループに 2 番目のクラスを追加して、それらのクラスに bgColor を配置することができます (何らかの目的がある場合は、すべて集約されたクラスが必要です)。

<ul>
    <li></li>
    <li class="aggregated bg1"></li>
    <li class="aggregated bg1"></li>
    <li class="aggregated bg1"></li>
    <li></li>
    <li class="aggregated bg2"></li>
    <li class="aggregated bg2"></li>
    <li class="aggregated bg2"></li>
    <li></li>
    <li class="aggregated bg3"></li>
    <li class="aggregated bg3"></li>
</ul>
于 2012-05-30T21:19:18.713 に答える
0

グループの各リスト項目にカスタム クラスを追加する代わりに、項目を div でグループ化できます。次に例を示します。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <div class="group">
      <li></li>
      <li></li>
      <li></li>
    </div>
</ul>

nth-of-type次に、セレクターを使用して関心のあるグループを選択できます。次に例を示します。

ul > .group:nth-of-type(1) > li
{
    background-color:red;
}

nth-of-typeセレクターを使用すると、番号、キーワード、または数式で項目を選択できます。

例jsFiddle。

于 2012-05-30T22:17:04.563 に答える