3

如何获取与单击的子元素、元素的文档相关的父元素的索引值？$(this)

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);
}

预期产出

场景
单击本文档中第二个图库的按钮：

1
4

2 回答 2

5

尝试这个：

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

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

看看我的工作 jsFiddle 示例。

来源

jQuery API - .index()

于 2013-04-17T12:11:46.150 回答
4

当您调用 index() 时，它会为您提供相对于您选择的元素集合的位置，在这种情况下，

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

相反，您希望它与整个文档中的画廊相关，因此您需要：

$('.gallery').index($(this).parents('.gallery'))
于 2013-04-17T12:15:05.910 回答