Question

假设我在<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">将具有蓝色背景，第二组具有黄色背景等。我不想依赖JS并且不想添加任意类名或ID。我想使用已经存在的代码。

可能？如果是这样，怎么样？

Answer 1

好的，这可能。但它非常脆弱，依赖于可预测的类，它还需要一个现代化的浏览器：

/* 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 Fiddle demo

Answer 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;
        }
    }
} );

Answer 3

您可以为不同的bgColors使用不同的类，或者将第二个类添加到组中并将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>

Answer 4

您可以使用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。

选择组中的子元素，并以不同方式处理每个组

4 个答案: