有没有办法获取一个元素的第n个兄弟（元素）？ （不是父元素的第 n 个子元素）

Question

我有一个行数未知、列数可变的网格。我通过声明一个常量来设置列数。*我检测到一个组合键，用于将焦点从网格中位置未知的元素上移动；它可以是网格的任何子元素（在本例中为图像）。这个想法是将焦点移动到正上方或正下方的图像。

为此，我需要从焦点元素中获取上一个或下一个的

nth

同级元素，其中

n

是列数。

我无法使用

parentNode.querySelector(':nth-child(…)')

，因为我不知道聚焦元素与起始索引 (

:first-child

) 的关系。

*由于这是一个 Web 组件，因此通过在组件上声明属性来设置常量。

有没有 JavaScript 方法来处理这种情况？

Answer 1

您可以计算父节点的子节点，直到找到原始节点。这样您就可以找到

nth

位置。

function getNthPosition(node) {

  const parent = node.parentElement;

  
  // var nodes = parent.querySelectorAll(":scope > *");
  var nodes = parent.children;
  for (var i = 0; i < nodes.length; i++) {

    if (nodes[i] === node) {
      return i + 1
    }
  }
  return -1;
}

document.querySelectorAll("button").forEach(function(button) {
  button.addEventListener('click', function() {
    console.log("position", getNthPosition(button))
  })
})

<div class="parent">
  <button>click</button>
  <button>click</button>
  <button>click</button>
  <button>click</button>
</div>

Answer 2

不，没有 DOM 方法可以直接执行此操作。不过，你可以

• 迭代

  .previous|next(Element)Sibling

  给定的次数：

  function getNthElementSibling(el, n) {
    while (el && n > 0) {
      el = el.nextElementSibling;
      n--;
    }
    while (el && n < 0) {
      el = el.previousElementSibling;
      n++;
    }
    return el;
  }
  

  （如果要考虑非元素节点，请使用

  .nextSibling

  和

  .previousSibling

  ）
• 在其父节点的子（元素）节点中查找元素的索引（请参阅查找 DOM 节点索引、JavaScript DOM：在容器中查找元素索引），然后在索引运算后返回相应的子节点：

  function getNthElementSibling(el, n) {
    const siblings = Array.from(el.parentNode.children);
    return siblings[siblings.indexOf(el) + n];
  }
  

  （如果要考虑非元素节点，请使用

  .childNodes

  ）