当前位置：首页 > JavaScript

js 实现sublings

2026-04-07 03:31:42JavaScript

在JavaScript中，siblings通常指DOM元素的兄弟节点（即同一父元素下的其他子元素）。以下是几种实现获取兄弟节点的方法：

原生JavaScript实现

通过parentNode和childNodes属性遍历兄弟节点：

function getSiblings(element) {
  const siblings = [];
  let sibling = element.parentNode.firstChild;
  while (sibling) {
    if (sibling.nodeType === 1 && sibling !== element) {
      siblings.push(sibling);
    }
    sibling = sibling.nextSibling;
  }
  return siblings;
}

使用Element属性

利用previousElementSibling和nextElementSibling逐个获取：

function getAllSiblings(element) {
  const siblings = [];
  let prev = element.previousElementSibling;
  let next = element.nextElementSibling;

  while (prev) {
    siblings.unshift(prev);
    prev = prev.previousElementSibling;
  }

  while (next) {
    siblings.push(next);
    next = next.nextElementSibling;
  }

  return siblings;
}

jQuery简化版

如果项目中使用jQuery，可直接调用siblings()方法：

js 实现sublings

const siblings = $(element).siblings();

注意事项

原生方法中nodeType === 1确保只处理元素节点（排除文本节点等）。
previousElementSibling和nextElementSibling仅返回元素节点，而previousSibling/nextSibling会包含所有节点类型。
jQuery版本会返回所有兄弟元素，包括不同标签名的元素。