jquery - 如何找到具有属性显示 :block in jQuery? 的 div 的索引

Question

我需要在 jQuery 中找到具有 display:block,block 属性的 div 的索引。

html 结构如下:

<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>

动态生成子div的地方

Answer 1

使用 attribute contains selector 或 :visible 伪类选择器获取元素，然后使用 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>