Question

我们知道我们是否有这样的HTML代码：

<body>
    <div class="parent">
        <div class="item">item 1</div>
        <div class="item">item 2</div>
        <div class="item">item 3</div>
    </div>

    <div class="parent">
        <div class="item">item 4</div>
        <div class="item">item 5</div>
        <div class="item">item 6</div>
        <div class="item">item 7</div>
    </div>

<div class="item">item 8</div>
<div class="item">item 9</div>
</body>

所以我想这样做。当我们点击其中一个项目时，我们如何从body标签中知道该元素的索引。我知道当我们点击时使用index（）函数：

“第8项”它将返回2，
“第9项”将返回3，
“第7项”将返回4，

那么我们怎样才能准确地知道root中“item”的索引（我的意思是body标签）？因此，当我们点击“第8项”时，它将返回7而不是2。

Answer 1

将选择器传递给index()方法：

$(this).index('.item')

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

.index()

Here's a fiddle

Answer 2

尝试index(Selector)

表示要在其中查找元素的jQuery集合的选择器。

$(this).index('.item');

fiddle Demo

注意： - 索引从0开始

Answer 3

没有正确的方法可以做到这一点，你应该正确地重新考虑将索引放在元素中，例如：

<div class="item" data-index=8>item 8</div>

然后在onclick事件处理程序中，您可以通过以下方式访问此索引：

$（event.currentTarget）。数据（ “索引”）

话虽如此，这是一个解决你的直接问题的建议（但我重复一遍：除非你在很大程度上简化了问题，否则这个方法可能有问题......）

$(function(){
    $(".item").on("click", function(event){
        var clickedIndex;
        var clickedItem = $(event.currentTarget)[0];
        $(".item").each(function(index, item){
          if(item == clickedItem)
            clickedIndex = index;             
        });
        //Put the result somewhere...
        $("#show-index").html(clickedIndex);
    });
});

jsFiddle here!

编辑：所有其他提出的解决方案都好得多:)我不知道.index（）可以选择一个。但我的观点保持不变，基于DOM中元素的索引，忽略它周围的结构，有点可疑......从经验来看，当我不得不这样做时，这是一个我可以解决的问题以更清洁的方式使用ID或其他信息...

Answer 4

$(document).ready(function() {
     $('.item').each(function() {
           console.log($(this).index() + " - " + $(this).html());
     });     
});

如何从body标签获取元素的索引？

4 个答案:

.index()

Here's a fiddle