アイテム用のJavaScriptセレクタ次可視

Question

ない場合には、私は、それらが可視B項目が続く全AアイテムにマッチするセレクタquerySelectorまたは機能をするノード

A 
B 
B 
A 
A 
A 
B 
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()