HTML

<html>
   <body>
      <header>
         <div class="gallery">
            <div class="controls">
               <button class="next"></button>
               <button class="previous"></button>
            </div>
         </div>
      </header>
      <section>
         <section>
            <article>
               <div class="gallery">
                  <div class="controls">
                     <button class="next"></button>
                     <button class="previous"></button>
                  </div>
               </div>
               <div class="gallery">
                  <div class="controls">
                     <button class="next"></button>
                     <button class="previous"></button>
                  </div>
               </div>
            </article>
         </section>
      </section>
   </body>
</html>

在此HTML中，可以在正文中的任何地方声明图库。所以我需要一个“智能”选择器来解决问题。

伪JavaScript

$('.controls button').click(function() {
   var hope = $(this).parents('.gallery').index();
   alert(hope);
}

预期输出

场景
点击此文档中第二个图库的按钮：

Answer 1

试试这个：

$('.gallery').index( $(this).parents('.gallery') );

.index()正在查找应用它的元素组中传递元素的索引。

查看我的working jsFiddle example。

<强>源（S）

jQuery API - .index()

Answer 2

当你调用index（）时，它会给你相对于你选择的元素集合的位置，在这种情况下，

$(this).parents('.gallery')

相反，您希望它相对于整个文档中的图库，因此您需要：

$('.gallery').index($(this).parents('.gallery'))

获取子项的父级索引（）值

HTML

伪JavaScript

预期输出

2 个答案: