Question

请注意，以下是我的真实代码的过度简化版本。

我有一个事件绑定到列表集的父元素：

var index;

$('.gallery').on('click', '.img', function(){
  index = $(this).index();
});

我的HTML看起来像这样：

<div class="gallery">
  <ul>
    <li class="wrapper"><img src="img.png" alt=""></li>
    <li class="wrapper"><img src="img.png" alt=""></li>
  </ul>
  <ul>
    <li class="wrapper"><img src="img.png" alt=""></li>
    <li class="wrapper"><img src="img.png" alt=""></li>
    <li class="wrapper"><img src="img.png" alt=""></li>
  </ul>
</div>

当我在img下的所有li的全局上下文中点击它的包装时，如何捕获.gallery的索引？

即。如果我点击第五张图片index将是4而不是2。

一种可能的解决方案是将data-index添加到我的所有li中，但我不知道我是否可以仅使用javascript执行此操作。

Answer 1

只需在.index()方法中添加选择器参数：

$('.gallery').on('click', 'img', function() {
    var index = $(this).index('.wrapper img');
    // ...
});

DEMO： http://jsfiddle.net/Rb53r/

Explanation from jQuery site：

如果选择器字符串作为参数传递，则.index（）返回一个整数，指示jQuery中第一个元素的位置相对于选择器匹配的元素的对象。

如何在分隔列表中使用jquery计算元素的索引？

1 个答案: