jQueryのdisplay：blockプロパティを持つdivのインデックスを見つけるには？

Question

jQueryのdisplay：blockというプロパティを持つdivのインデックスを見つける必要があります。子div要素を動的に

Answer 1

使用attribute contains selectorまたは:visible擬似クラスセレクタを生成している

<div id="bb-bookblock" class="bb-bookblock bb-vertical" >  

    <div class="bb-item" style="display: none;"> </div> 
    <div class="bb-item" style="display: none;"> </div> 
    <div class="bb-item" style="display: none;"> </div> 
    <div class="bb-item" style="display: block;"> </div> 
    <div class="bb-item" style="display: none;"> </div> 
    <div class="bb-item" style="display: none;"> </div> 
</div> 

要素を取得し、を使用して、それのインデックスを取得する：

HTML構造が似ていますindex()メソッド。

console.log(
 
    $('.bb-item[style*="display: block"]').index(), 
 
    $('.bb-item:visible').index() 
 
)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="bb-bookblock" class="bb-bookblock bb-vertical"> 
 
    <div class="bb-item" style="display: none;"></div> 
 
    <div class="bb-item" style="display: none;"></div> 
 
    <div class="bb-item" style="display: none;"></div> 
 
    <div class="bb-item" style="display: block;"></div> 
 
    <div class="bb-item" style="display: none;"></div> 
 
    <div class="bb-item" style="display: none;"></div> 
 
</div>

Answer 2

コード

$("#bb-bookblock").find("div[style='display: block;']").index();