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中遍历对象的property的3种方法介绍
Dec 30 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
Jul 24 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
vue router返回到指定的路由的场景分析
Nov 10 Javascript
JavaScript实现两个数组的交集
Mar 25 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注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
vuex学习之Actions的用法详解
2017/08/29 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
python笔记:mysql、redis操作方法
2017/06/28 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python命令行参数用法实例分析
2019/06/25 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python如何处理程序无法打开
2020/06/16 Python
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
单位工作证明范本
2015/06/15 职场文书
小学大队长竞选稿
2015/11/20 职场文书