javascript - 如何在JQuery中按父级获取元素的索引

Question

我想从父树中获取 div 元素的索引:

$(".row .col a").click(function() {
  var e = $(this).parent();
  var p = e.parent();
  var i = p.index(e);
  console.log([e, p, i]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="row">
    <div class="col"><a>link 1</a>
    </div>
    <div class="col"><a>link 2</a>
    </div>
  </div>
</div>

但索引始终为-1。第一个链接应该是 0，第二个链接应该是 1。在这种 html 结构中如何获取索引？

Answer 1

index()获取父元素中的索引。由于只有一个 .row 类元素，index() 返回索引 0，因为它是从零开始的。

要获取单击元素的索引，请获取最接近的祖先 .col 并对其调用索引。

$(this).closest('.col').index()

Demo

$(".row .col a").click(function() {
  console.log($(this).closest('.col').index());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="row">
    <div class="col"><a>link 1</a>
    </div>
    <div class="col"><a>link 2</a>
    </div>
  </div>
</div>