JavaScript進行項目選擇時，接下來是不可見的

Question

說我有節點

A 
B 
B 
A 
A 
A 
B 
B 

我想選擇querySelector或者功能，將匹配所有A項目，他們之後是可見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>

Answer 2

你有試過的.next（）方法？

var list 
$(".a")each(function(index, obj) { 
    if($(obj).next().is(":visible")) { 
     list += obj 
    } 
}) 

Answer 3

我認爲這是做的更簡單的方法：

$('.a + .b:visible').prev()