当第一个初始元素没有与此 jquery 等效的某个类 CSS 时，选择下一个元素答案

【问题标题】：Select next element when the first initial element doesn't have a cetrain class CSS equivalent of this jquery当第一个初始元素没有与此 jquery 等效的某个类 CSS 时，选择下一个元素
【发布时间】：2015-02-18 12:18:05
【问题描述】：

我有以下 jQuery。它循环遍历父元素，然后选择第一个没有类active 的div。从那里，选择下一个元素：

jQuery

$('.parent').each(function () {
    $('div', this).eq(0).not('.active').next().addClass('selected');
});

CSS

.parent * {
    padding-left: 1em;
    display: block;
}
.main {
    border-left: 2px solid;
}
.selected {
    color: #f00;
}

HTML

<div class="parent">
    <span class="main">First Span</span>
    <span>Second Span</span>
    <div class="main">First div</div>
    <div>Second div***</div>
    <div class="main">Third div</div>
    <span>Third span</span>
</div>
<div class="parent">
    <span class="main">First Span</span>
    <span>Second Span</span>
    <div class="main active">First div</div>
    <div>Second div - dont select</div>
    <div class="main">Third div</div>
    <span>Third span</span>
</div>
<div class="parent">
    <span class="main">First Span</span>
    <span>Second Span</span>
    <div class="main">First div</div>
    <div>Second div***</div>
    <div class="main">Third div</div>
    <span>Third span</span>
</div>

如果没有 jQuery，我怎么能做到这一点。我感觉有一些 css4 选择器可以提供帮助。如果没有，一个常规的 javascript 答案会很棒，因为我正试图摆脱这个 jquery。

【问题讨论】：

你的 HTML 是什么样的？
对不起，我添加了一个最小化的例子。我基本上希望选择带有 3 个星号 *** 的元素。

标签： javascript html css css-selectors

【解决方案1】：

您可以使用:first-of-type/:not() 伪类的组合来选择div。然后使用adjacent sibling combinator, + 选择下一个元素：

Example Here

.parent div:first-of-type:not(.active) + * {
    color: #f00;
}

既然你说你想要一个与你发布的 jQuery 等效的 JS：

Example Here

var elements = document.querySelectorAll('.parent div:first-of-type:not(.active) + *');
Array.prototype.forEach.call(elements, function (el) {
    el.classList.add('selected');
});

【讨论】：