JavaScript封装函数:获取下一个/上一个兄弟元素节点
要求:
- 获得下一个/上一个兄弟元素节点,不包括文本节点等
- 解决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>
JavaScript封装函数:获取下一个/上一个兄弟元素节点的更多相关文章
- Shell $?获取函数返回值或者上一个命令的退出状态
Shell $?获取函数返回值或者上一个命令的退出状态 来自:互联网 时间:2021-01-12 阅读:2 $? 是一个特殊变量,用来获取上一个命令的退出状态,或者上一个函数的返回值. 所谓退出状态, ...
- 原生JavaScript 获取下一个/上一个同胞元素
看JavaScript遇到的问题,研究了下 获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取 上 ...
- getNextElement( )函数——获取下一个特定的元素节点
function getNextElement(node){ //定义getNextElement()函数 if (node.nodeType==){ //条件:如果node参数nodetype属性为 ...
- javascript 在一个函数参数中包含另一个函数的引用
javascript函数的参数包含另一个函数的情形: <script> //b函数的参数func为另一个函数 function b(a, func) { alert(a); //调用参数 ...
- javascript封装函数入门
封装函数的入门 一.使用函数有两步: 1.定义函数,又叫声明函数, 封装函数. 定义函数的三个要素:功能,参数,返回值. function 函数名(形参){ 函数代码 return 结果} //2.调 ...
- 怎样获取当前文档所有的元素节点(即html标签节点)
方法1. 使用 document.getElementsByTagName("*"); 方法2. 使用document.querySelectorAll("*" ...
- kubernetes获取崩溃容器/上一个容器的应用日志
kubectl logs命令将显示当前容器的日志.当你想知道为什么前一个容器终止时,你想看到的是前一个容器的日志,而不是当前容器的.可以通过添加--previous选项来完成: $ kubectl l ...
- 关于jQuery获取不到动态添加的元素节点的问题
遇到问题: 当我获取 $("#art-list")页面元素后去在后面追加标签的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到. 问题 ...
- js获取上一个兄弟元素
需要用到的两个属性:previousSbiling和previousElementSibling previousSibling:获取元素的上一个兄弟节点:(既包含元素节点.文本节点.注释节点) pr ...
随机推荐
- PageObject六大原则
The public methods represent the services that the page offers 公共方法表示页面提供的服务 Try not to expose the i ...
- AOP理论
目录 AOP理论 什么是AOP 那Spring AOP,AspectJ又是啥呢? 为什么说AOP是OOP的补充和完善呢? 应用场景举例 AOP的优点 AOP的术语整理 AOP理论 什么是AOP AOP ...
- HDU-4417-Super Mario(主席树解法)
Mario is world-famous plumber. His “burly” figure and amazing jumping ability reminded in our memory ...
- window.location.href跳转无效
window.location.href跳转无效 问题情况 JS中设置window.location.href跳转无效 原因是 a标签的href跳转会执行在window.location. ...
- java中整型、浮点型、char型扩展
怎么区分是什么进制? 二进制:0b开头,eg: int i = 0b10; 八进制:0开头,eg: int k = 010; 十进制: 十六进制:0x开头,eg: int j = 0x10; 浮点数类 ...
- Spring Batch远程分区的本地Jar包模式
1 前言 欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! Spring相关文章:Springboot-Cloud Spring Batch远程分区对于大量数据的处理非常擅长,它的实现 ...
- python变量及简单数据类型
python 目录 python 1.变量 1.变量的定义 2.变量的命名 3. 关键字 4.变量的命名规则 5.变量的类型 5.不同类型变量之间的计算 6.变量的输入 7.变量的格式化输出 8.格式 ...
- Jmeter测试工具
jmeter的简单应用 目录 jmeter的简单应用 1.Jmeter 的基本概念 2.我们 为什么 使用 Jmeter 3.Jmeter的作用 4.Jmeter怎么用 5.安装JAVA环境 6.Jm ...
- 腾讯会议大规模使用Kubernetes的技术实践
腾讯会议,一款提供灵活协作的线上会议解决方案.其中大量的模块是有状态服务,在使用Kubernetes为其进行容器化部署时,Pod升级需保持共享内存.长连接服务.升级时只容忍ms级抖动,需提供大规模分批 ...
- .NetCore之接口缓存
1.问题:我们平时做开发的时候肯定都有用到缓存这个功能,一般写法是在需要的业务代码里读取缓存.判断是否存在.不存在则读取数据库再设置缓存这样一个步骤.但是如果我们有很多地方业务都有用到缓存,我们就需要 ...