当前位置:首页 > JavaScript

js 实现sublings

2026-03-15 10:02:15JavaScript

在 JavaScript 中,可以通过 DOM 操作获取元素的兄弟节点(siblings)。以下是几种常见的实现方法:

获取所有兄弟节点

使用 parentNode.children 结合过滤当前元素:

function getAllSiblings(element) {
  const children = Array.from(element.parentNode.children);
  return children.filter(child => child !== element);
}

获取下一个兄弟节点

使用 nextElementSibling 属性:

const nextSibling = element.nextElementSibling;

获取上一个兄弟节点

使用 previousElementSibling 属性:

const previousSibling = element.previousElementSibling;

获取所有后续兄弟节点

递归获取所有 nextElementSibling

function getNextSiblings(element) {
  let siblings = [];
  while (element = element.nextElementSibling) {
    siblings.push(element);
  }
  return siblings;
}

获取所有前序兄弟节点

递归获取所有 previousElementSibling

function getPreviousSiblings(element) {
  let siblings = [];
  while (element = element.previousElementSibling) {
    siblings.push(element);
  }
  return siblings;
}

使用 jQuery 方法

如果项目中使用了 jQuery,可以更简洁地获取兄弟节点:

js 实现sublings

// 所有兄弟节点
const siblings = $(element).siblings();

// 下一个兄弟节点
const next = $(element).next();

// 上一个兄弟节点
const prev = $(element).prev();

这些方法可以根据具体需求选择使用,原生 DOM 方法适用于不依赖 jQuery 的项目,而 jQuery 方法则提供了更简洁的语法。

标签: jssublings
分享给朋友:

相关文章

js实现验证

js实现验证

验证表单输入 使用JavaScript验证表单输入是常见的需求。可以通过监听表单提交事件,检查输入字段是否符合要求。 document.getElementById('myForm').addEve…

js实现类

js实现类

JavaScript 实现类的几种方式 JavaScript 是一种基于原型的语言,但在 ES6 之后引入了 class 语法糖,使得实现类更加直观。以下是几种常见的实现方式: 使用构造函数 传统的…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含inpu…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…