使用 JavaScript 获取子节点的索引

作者

使用 JavaScript 获取子节点的索引

Get the Index of a Child node using JavaScript

获取子节点的索引：

  1. 使用该Array.from()方法将子集合转换为数组。
  2. 使用indexOf()方法获取子节点的索引。
  3. 该indexOf()方法返回可以在数组中找到元素的第一个索引。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="parent">
      <p>Child 1</p>
      <p>Child 2</p>
      <p id="child3">Child 3</p>
      <p>Child 4</p>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const child3 = document.getElementById('child3');

const index = Array.from(
  child3.parentElement.children
).indexOf(child3);

console.log(index); // 👉️ 2

children
属性返回一个HTMLCollection包含访问该属性的元素的子元素的。

我们必须将 转换HTMLCollection为数组才能使用
Array.indexOf
方法。

该indexOf方法接受一个值并尝试在数组中定位它。

如果找到该值，则从该方法返回其索引，否则返回。 -1

或者，您可以使用简单的for循环来获得相同的结果。

索引.js
const parent = document.getElementById('parent');

const children = parent.children;

let index = -1;

for (let i = 0; i < children.length; i++) {
  if (children[i].id === 'child3') {
    index = i;
    break;
  }
}

console.log(index); // 👉️ 2

我们使用一个for循环来迭代子集合。

在每次迭代中，我们检查id当前孩子的属性是否等于child3。

如果满足条件，我们将当前索引分配给index 变量并使用break关键字跳出循环。 for

break关键字用于退出循环以避免不必要的工作。

该index变量被初始化为-1模仿该
indexOf方法的行为。但是，您可以根据您的用例进行调整。

–

发表评论