查找容器内 div 的索引

Question

我有一个包含多个 div 的容器，并且在每个 div 中我都有一个可以单击的处理程序。 要求是返回容器中 div 的索引以供进一步处理。 为了便于阅读，我已经简化了代码。

HTML：

<div class="container">
  <div class="block">
    
    <div class="handler">
    Click
    </div>
  </div>
  <div class="block">
    
    <div class="handler">
    Click
    </div>
  </div>
  <div class="block">
    
    <div class="handler">
    Click
    </div>
  </div>
  <div class="block">
    
    <div class="handler">
    Click
    </div>
  </div>
</div>

到目前为止我尝试过的 Javascript 代码，但我总是以 -1 作为索引：

$(document).ready(function(){
    $('.handler').click(function(e) {
        let index = Array.prototype.indexOf.call($('.container'), $(this).parents('.block'));
        console.log(index);
  });
});

我还创建了一个fiddle。

那么我在这里做错了什么？

Answer 1

您可以执行以下操作，

$('.handler').click(function(e) {
    var el = e.target;
    console.log([].indexOf.call(el.parentNode.parentNode.children, el.parentNode));
});

但是，如果您想知道代码中出了什么问题，

Array.prototype.indexOf.call($('.container')[0].children, $(this).parents('.block')[0])

这部分应该可以解决您代码中的问题。你一直做得很好，但是对于indexOf 的参数，我们需要.container 的children 数组并点击元素。

您将容器元素和当前单击的元素作为数组传递。那是Array.prototype.indexOf.call('[Container Element]', ['current clicked div']) 这是不对的。你应该通过这样的东西， Array.prototype.indexOf.call('[children, children, children...]', 'current clicked div element').

发生这种情况是因为$('.container') 返回了一个数组，其中的元素具有类名 .container。但是我们需要包含容器类的元素的所有子数组。

而$(this).parents('.block') 会返回一个包含匹配元素的数组，即使它只有一个。

Answer 2

您可以在选择的父元素上使用 index 方法访问索引。

$(document).ready(function(){
    $('.handler').click(function(e) {
    console.log($(this).parent().index())
  });
});

Answer 3

你可以这样做。找到最近被点击元素的索引，它也是.handler的直接子元素。要查找索引，请使用index()。

$(document).ready(function() {
  $('.handler').click(function(e) {
    let index = $(this).closest('.block').index()
    console.log(index);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="block">

    <div class="handler">
      Click
    </div>
  </div>
  <div class="block">

    <div class="handler">
      Click
    </div>
  </div>
  <div class="block">

    <div class="handler">
      Click
    </div>
  </div>
  <div class="block">

    <div class="handler">
      Click
    </div>
  </div>
</div>

Answer 4

您正在检查 HTML 中错误的嵌套级别。我相信您要做的是从更高的级别检查“.container”并获取单击的“.block”元素的索引。

此代码在您的 Fiddle 中有效：

$(document).ready(function(){
    $('.handler').click(function(e) {
      const p = e.target.parentElement.parentElement;
      const index = Array.prototype.indexOf.call(p.children, e.target.parentElement);

      console.log(p.className) // "container"
      console.log(index)
  });
});

Answer 5

这可以简单地使用 jQuery 中的委托来完成。

我修改了你的JSFiddle 代码。

$(".container").delegate('.block', 'click', function () {
    console.log( $(this).index() );
})

Answer 6

你可以使用id

<div class="container">
  <div class="block">
    
    <div id='0' class="handler">
    Click
    </div>
  </div>
  <div class="block">
    
    <div id='1' class="handler">
    Click
    </div>
  </div>
  <div class="block">
    
    <div id='2' class="handler">
    Click
    </div>
  </div>
  <div class="block">
    
    <div id='3' class="handler">
    Click
    </div>
  </div>
</div>

$(document).ready(function(){
    $('.handler').click(function(e) {
    let index = this.id
    console.log(index);
  });
});

https://jsfiddle.net/vhrt596x/2/