Question

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

的jQuery

active

CSS

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

HTML

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

如果没有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');
});

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

1 个答案: