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

【问题标题】：How to get the index of element from body tag?如何从body标签中获取元素的索引？
【发布时间】：2013-12-05 14:42:14
【问题描述】：

我们知道我们是否有这样的 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() 函数时：

"item 8" 它将返回 2，
“项目 9”将返回 3，
“项目 7”将返回 4，

那么我们如何才能从根（我的意思是body标签）准确地知道“item”的索引？所以当我们点击“item 8”时，它会返回 7 而不是 2。

【问题讨论】：

标签： javascript jquery html indexing

【解决方案1】：

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

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

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

.index()

Here's a fiddle

【讨论】：

【解决方案2】：

试试index(Selector)

代表一个 jQuery 集合的选择器，在其中查找元素。

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

fiddle Demo

注意：- 索引从 0 开始

【讨论】：

【解决方案3】：

没有适当的方法可以做到这一点，您应该重新考虑将索引放入元素中，例如：

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

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

$(event.currentTarget).data("index")

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

$(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 或其他信息...

【讨论】：

【解决方案4】：

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

【讨论】：