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 相关文章推荐
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
jQuery插件制作的实例教程
May 16 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 Vue.js
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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
关于图片验证码设计的思考
2007/01/29 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
python备份文件的脚本
2008/08/11 Python
pymssql ntext字段调用问题解决方法
2008/12/17 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
python logging 日志的级别调整方式
2020/02/21 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
pycharm实现猜数游戏
2020/12/07 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
四好少年事迹材料
2014/01/12 职场文书
机电一体化应届生求职信范文
2014/01/24 职场文书
会计演讲稿范文
2014/05/23 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2014年小学工作总结
2014/11/26 职场文书
助学金感谢信
2015/01/20 职场文书
教师个人发展总结
2015/02/11 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
MySQL连接查询你真的学会了吗?
2021/06/02 MySQL
redis复制有可能碰到的问题汇总
2022/04/03 Redis