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插件化开发教程(五)
Feb 01 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
微信小程序实现星级评分和展示
Jul 05 Javascript
vue仿element实现分页器效果
Sep 13 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
php中apc缓存使用示例
2013/12/25 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
php实现购物车功能(下)
2016/01/05 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
基于zepto的移动端轻量级日期插件--date_picker
2016/03/04 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
基于Python log 的正确打开方式
2018/04/28 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
节能减耗标语
2014/06/21 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
党员作风建设自查报告
2014/10/23 职场文书
追悼会答谢词
2015/01/05 职场文书
医院病假条范文
2015/08/17 职场文书
详解JS数组方法
2021/11/20 Javascript