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入门教程 Cookies
Jan 31 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
js与applet相互调用的方法
Jun 22 Javascript
解析js如何获取css样式
Dec 11 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 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下删除字符串中HTML标签的函数
2008/08/27 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery中:visible选择器用法实例
2014/12/30 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
Python实现的栈(Stack)
2018/01/26 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
opencv 阈值分割的具体使用
2020/07/08 Python
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
护理自我鉴定范文
2013/10/06 职场文书
西门豹教学反思
2014/02/04 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
毕业实习感受与体会
2015/05/26 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS