js 获取元素所有兄弟节点的实现方法


Posted in Javascript onSeptember 06, 2016

比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色)。我想把其他所有li——不包括红的li——的颜色也设为红色,此时,就需要获得红li的所有兄弟节点。

兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟)。兄弟节点同理,下面是一个常规的获取兄弟节点的办法。

代码如下

function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0,pl= p.length;i<pl;i++) {
if(p[i] !== elm) a.push(p[i]);
}
return a;
}

思路:先获取此元素的父节点的所有子节点,因为所有子节点也包括此元素自己,所以要从结果中去掉自己。

还有另外一种看起来比较奇特的方法,是jQuery里面获取兄弟节点的源码:

代码如下

function sibling( elem ) {
var r = [];
var n = elem.parentNode.firstChild;
for ( ; n; n = n.nextSibling ) {
if ( n.nodeType === 1 && n !== elem ) {
r.push( n );
}
}

return r;
}

思路:先找到此元素的父节点的第一个子节点,然后循环查找此节点的下一个兄弟节点,一直到查找完毕。

我很奇怪为什么jQuery会使用这个方法,难道这个方法比第一个方法效率更高?

经过我初步测试——1500多个li,上面两个方法效率几乎无差别,都是几毫秒内就获取成功了。测试环境是chrome与firefox。

如果有获取所有兄弟节点的需求,可以使用以上任一方法。

当然,我会在以后的使用过程中验证以上两个方法,如果有出入,再更新吧。

JQUERY的父,子,兄弟节点查找方法

jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class")

jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素

jQuery.children(expr).返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点

jQuery.contents(),返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个

jQuery对象返回,children()则只会返回节点

jQuery.prev(),返回上一个兄弟节点,不是所有的兄弟节点

jQuery.prevAll(),返回所有之前的兄弟节点

jQuery.next(),返回下一个兄弟节点,不是所有的兄弟节点

jQuery.nextAll(),返回所有之后的兄弟节点

jQuery.siblings(),返回兄弟姐妹节点,不分前后

jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()

的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从<p>元素开始找<span>,等同于$("p span")

以上这篇js 获取元素所有兄弟节点的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
js键盘事件的keyCode
Jul 29 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 #Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 #Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 #Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 #Javascript
原生JS:Date对象全面解析
Sep 06 #Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 #Javascript
Vue.js每天必学之过渡与动画
Sep 06 #Javascript
You might like
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python入门篇之文件
2014/10/20 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
会计学专业学生的求职信范文
2014/01/27 职场文书
房产委托公证书样本
2014/04/04 职场文书
出租房屋协议书
2014/09/14 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
教务处教学工作总结
2015/08/10 职场文书
环保建议书作文300字
2015/09/14 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python