javascript - 获取封闭 div 中子 div 的索引。未列出

Question

我正在构建一个 Angular 7 应用程序。我想获取父 div 中某个 div 的“索引”或行。

我的标记如下所示:

<div class="container">
  <div class="item" data-id="1" />
  <div class="item" data-id="2" />
  <div class="item" data-id="2" />
  <div class="item" data-id="3" />
</div>

我知道如果标记如下所示，我可以轻松做到这一点，但如果可以避免它，我不想使用列表。

<ul class="container">
 <li class="item" data-id="1" />
 <li class="item" data-id="2" />
 <li class="item" data-id="2" />
 <li class="item" data-id="3" />
</ul>

基本上我知道 data-id，所以我想选择它，然后获取属于它的索引。

如何在普通 javascript 中(不使用 jQuery)执行此操作？

Answer 1

您可以使用 querySelector 通过属性值获取元素，如下所示:

// if you want the item with data-id=2
document.querySelector("[data-id='2']")

检查this一个工作示例