Question

我有以下代码：

＆＃13;

var $thumbs = $('.thumbs');

$thumbs.on('click', 'a', function($e) {
  $e.preventDefault();
  var $this = $(this);

  console.log($this.parent().index('.thumbs'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col xs4 s12 m4 push-m8 thumbs">
   <div class="col xs4 s6">
       <a href=""><img src="img_url.jpg"></a>
       <a href=""><img src="img_url.jpg"></a>
       <a href=""><img src="img_url.jpg"></a>
       <a href=""><img src="img_url.jpg"></a>
    </div>
  
    <div class="col xs4 s6">
        <a href=""><img src="img_url.jpg"></a>
        <a href=""><img src="img_url.jpg"></a>
        <a href=""><img src="img_url.jpg"></a>
     </div>
</div>

<div class="col xs4 s12 m4 push-m8 thumbs">
     <div class="col xs4 s6">
        <a href=""><img src="img_url.jpg"></a>
        <a href=""><img src="img_url.jpg"></a>
        <a href=""><img src="img_url.jpg"></a>
        <a href=""><img src="img_url.jpg"></a>
      </div>
      <div class="col xs4 s6">
         <a href=""><img src="img_url.jpg"></a>
         <a href=""><img src="img_url.jpg"></a>
         <a href=""><img src="img_url.jpg"></a>
       </div>
</div>

＆＃13;

我想知道的是，点击thumbs元素时a的索引是什么。因此，当从第一个a点击thumbs时，我希望返回为0，而第二个thumbs为1。但由于某种原因，我只会返回-1。

以下是我已尝试过的一些jQuery示例（）但没有成功：

Answer 1

问题是.thumbs元素不是被点击的parent元素的a。您需要遍历元素树。

你可以用.parent().parent()执行此操作，但这不是很强大。请改用closest：

console.log($this.closest('.thumbs').index('.thumbs'));

根据子操作获取父div的索引

1 个答案: