Question

好的，我现在非常绝望。我无法弄清楚如何获取与整个文档相关的单击div类的索引。

假设我有这样的结构：

<div class="hello">
  <div class="world">0ne</div>
</div>

<div class="hello">
  <div class="world">Two</div>
</div>

<div class="container">
  <div class="world">Three</div>
  <div class="anotherContainer">
     <div class="world">Four</div>
  </div>
</div>

<div class="world">Five</div>

我如何得到第二个“世界”类的索引，但与整个文档/正文有关。所以无论目标在哪里，我都会得到合适的索引。

现在它与父母有关，但几乎全是：

https://jsfiddle.net/btkyu8wr/2/

那么我怎么能解决这个问题呢？我想弄清楚我错过了什么。

Answer 1

最简单的方法似乎是使用getElementsByClassName，然后迭代它们并获取被点击元素的索引。

这样的事情：

＆＃13;

document.body.addEventListener("click", function(e) {
  if(e.target != e.currentTarget) {
    var className = e.target.className;
    var els = document.getElementsByClassName(className);
    for(var i = 0; i < els.length; i++) {
      if(els[i] == e.target){
        alert(i+1);
        return i+1;
      }
    }
  }
});

＆＃13;

<div class="hello">
  <div class="world">0ne</div>
</div>

<div class="hello">
  <div class="world">Two</div>
</div>

<div class="container">
  <div class="world">Three</div>
  <div class="anotherContainer">
     <div class="world">Four</div>
  </div>
</div>

<div class="world">Five</div>

＆＃13;

请注意，我正在执行i+1，这意味着我正在返回一个基于索引的索引。当然，如果您希望它们从零开始，只需使用i。

获取与整个文档相关的已点击元素的索引

1 个答案: