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

Question

我有以下 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。

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