Question

以下是HTML

<div id="father">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
</div>

我想得到孩子们的指数。在JQuery中，有一些东西可以获得索引首先，我们点击第一个div并得到索引0

$(".child").click(function(alert($(this).index())};

但是当HTML是：

<div id="father">
      <div class="child"></div>
      <div class="child"></div>
      <p>some text</p>
      <div class="child"></div>
</div>

当我们点击第四个div并获得索引3而不是2 我尝试使用或者使用某种方法，但无济于事。

$(".child").index(":not(p)");

有什么简单的方法可以满足要求吗？

谢谢！

Answer 1

您可以计算以前的兄弟姐妹，这些兄弟姐妹也有＃34;孩子＆＃34;：

＆＃13;

$('.child').click(function() {
    var count = $(this).prevAll('.child').length;
    console.log(count);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="father">
      <div class="child">AAA</div>
      <div class="child">BBB</div>
      <p>CCC</p>
      <div class="child">DDD</div>
</div>

＆＃13;

供参考，请检查：https://api.jquery.com/prevall/

Answer 2

使用.index()查找<div>相对于其父级点击的位置。将所选内容仅过滤为#father > div。

$("#father > div").click(function() {
    console.log($(this).index());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="father">
      <div class="child">Foo</div>
      <div class="child">Bar</div>
      <p>some text</p>
      <div class="child">FooBar</div>
</div>

如何从父元素

2 个答案: