打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
JavaScript封装函数:获取下一个/上一个兄弟元素节点

要求:

  1. 获得下一个/上一个兄弟元素节点,不包括文本节点等
  2. 解决IE兼容性问题

代码实现:

获得下一个兄弟元素节点:

function getNextElement(element) {
    var el = element;
    while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
    }
    return null;
}

获得上一个兄弟元素节点:

function getPrevElement(element) {
    var el = element;
    while (el = el.previousSibling) {
        if (el.nodeType === 1) {
            return el;
        }
    }
    return null;
}

实现效果:

有如下两兄弟标签:

<div>div</div>
<span>span</span>

获得下一个兄弟元素节点:
输入:

var div = document.querySelector('div');
console.log(getNextElement(div));

输出:

<span>span</span>

获得上一个兄弟元素节点:
输入:

var span = document.querySelector('span');
console.log(getPrevElement(span));

输出:

<div>div</div>
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
js和jquery获取父级元素、子级元素、兄弟元素的方法
jQuery选择器使用方法介绍
前端必备:jQuery 1.7.1API手册
第七章:选择器引擎
JavaScript HTML DOM 元素(节点)
JavaScript中的DOM与BOM
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服