如果隐藏所有其他孩子，如何将课程应用于孩子？

Question

我知道这对于jQuery来说非常简单，尽管我只使用了CSS解决方案（如果可能的话）。

我有一个div列表，最后一项是错误消息。我有一个简单的过滤系统，如果没有div与所选过滤器匹配，我想显示错误div。

HTML结构：

<div id="listHolder">
    <div class="listItem" data-filter-class="["filter1"]"></div>
    <div class="listItem" data-filter-class="["filter2"]"></div>
    <div class="listItem" data-filter-class="["filter1"]"></div>
    <div class="listItem" data-filter-class="["filter4"]"></div>
    <div class="errorItem">Nothing to display here</div>
</div>

我想要实现的目标：

如果div与任何过滤器都不匹配，我的过滤器插件会为他们提供inactive类。因此，我需要检查具有listItem类的所有div是否也具有inactive类，以使errorItem类具有display:block的样式。

仅供参考我将Wookmark插件用于我的列表和过滤系统。我也在使用LESS。

Answer 1

确定可能：http://jsfiddle.net/rudiedirkx/7b1kyfz3/3/

如果未隐藏上一项，您想要隐藏最后一项：

.listItem:not(.inactive) ~ .errorItem {
    display: none;
}

该演示使用JS来切换inactive类，而不是errorItem的显示逻辑。

我仍然同意这里所有聪明的人：JS可能会做得更好。无论如何你已经在使用它了。

Answer 2

您遇到的问题在于您的要求：

  

我需要检查所有具有listItem类的div是否也具有非活动类，以便为errorItem类提供display:block

的样式

虽然我们可以根据其前面的兄弟姐妹为最终<div>元素设置样式，但我们不能（不知道可能有多少）＆＃39;检查 all < / em> divs＆＃39;拥有inactive课程。但是，我们可以使用兄弟组合器（+）和繁琐的选择器：

.errorItem {
    display: none;
}
.listItem.inactive + .listItem.inactive + .listItem.inactive + .listItem.inactive + errorItem {
    display: block;
}

然而，这是荒谬的（特别是如果.errorItem元素之前存在动态数量的元素。

如果为 匹配提供的过滤器的元素申请了一个类名，例如active，则这更简单，并通过以下方式实现：

.errorItem {
    display: block;
}

.listItem.active ~ .errorItem {
    display: none;
}

此外，正如评论中所指出的，否定运算符也是可用的（尽管显然，它取决于所使用的浏览器的实现），这将适合选择器：

.errorItem {
    display: block;
}

.listItem:not(.inactive) ~ .errorItem {
    display: none;
}

总的来说，我强烈建议使用JavaScript来支持此功能，特别是因为使用Wookmark意味着JavaScript（如果不一定是jQuery）已经在同一个站点中使用。

原生JavaScript：

function hasPrecedingSibling (elem, state) {
    if (!state) {
        return false;
    }
    var found = false,
        cur = elem;
    while (cur.previousElementSibling && found === false) {
        if (cur.classList.contains(state)) {
            found = true;
        }
        else {
            cur = cur.previousElementSibling;
        }
    }
    return found;
}

[].forEach.call(document.querySelectorAll('.errorItem'), function (err) {
    err.style.display = hasPrecedingSibling (err, 'active') ? 'none' : 'block';
});