当下一个不可见时，项目的 JavaScript 选择器

Question

假设我有一个节点列表

A
B
B
A
A
A
B
B

我想要一个匹配所有A的选择器querySelector或函数后面带有可见 B 的项目项目。

jQuery 有一个 $(".a ~ .b:visible")除了这会返回 .b 的列表选择器，我想要 .a 。而且它是 jQuery，而不是纯 JavaScript。

Answer 1

您可以使用 :has() 和 + 相邻同级选择器的组合。

$('.a:has(+ .b:visible)').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">A</div>
<div class="b">B</div>
<div class="b" style="display: none;">B</div>
<div class="a">A</div>
<div class="b" style="display: none;">B</div>
<div class="b">B</div>

或者您可以选择 .b:visible，然后选择 prev(.a) 元素。

$('.b:visible').prev('.a').css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">A</div>
<div class="b">B</div>
<div class="b" style="display: none;">B</div>
<div class="a">A</div>
<div class="b" style="display: none;">B</div>
<div class="b">B</div>