jQuery 获取兄弟元素的几种不错方法


Posted in Javascript onMay 23, 2014

获取指定元素的兄弟元素时,可以使用adjacent sibling combinator (+),其中+的两侧内容都是selector expression.
如果要获取下例中所有的 h1的直接兄弟元素h2

<div> 
<h1>Main title</h1> 
<h2>Section title</h2> 
<p>Some content...</p> 
<h2>Section title</h2> 
<p>More content...</p> 
</div>

可以直接使用
$('h1 + h2') 
// Select ALL h2 elements that are adjacent siblings of H1 elements.

如果要过滤h1的兄弟元素,当然也可以使用
$('h1').siblings('h2,h3,p'); 
// Select all H2, H3, and P elements that are siblings of H1 elements.

如果要获取当前元素之后的所有兄弟元素,可以使用nextAll()
例如,针对下面的html代码
<ul> 
<li>First item</li> 
<li class="selected">Second Item</li> 
<li>Third item</li> 
<li>Fourth item</li> 
<li>Fifth item</li> 
</ul>

如果要获取第二个条目之后的所有li元素,可以使用如下代码
$('li.selected').nextAll('li');

上例也可以使用general sibling combinator (~)来实现
$('li.selected ~ li');

获取直接兄弟元素也可以不使用selector,直接使用next().
var topHeaders = $('h1'); 
topHeaders.next('h2').css('margin', '0);
Javascript 相关文章推荐
基于jQuery的公告无限循环滚动实现代码
May 11 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
js上传图片预览的实现方法
May 09 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
vue实现商城上货组件简易版
Nov 27 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
vue中如何添加百度统计代码
Dec 19 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
jquery 中的each()跳出循环的语句
May 23 #Javascript
Jquery给基本控件的取值、赋值示例
May 23 #Javascript
js动态修改整个页面样式达到换肤效果
May 23 #Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 #Javascript
javascript为下拉列表动态添加数据项
May 23 #Javascript
js检测网络是否具体连接功能的代码
May 23 #Javascript
JS实现距离上次刷新已过多少秒示例
May 23 #Javascript
You might like
德劲1103二次变频版的打磨
2021/03/02 无线电
服务器端解压缩zip的脚本
2006/12/22 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python中的引用和拷贝浅析
2014/11/22 Python
MySQL最常见的操作语句小结
2015/05/07 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
浅谈django orm 优化
2018/08/18 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Python restful框架接口开发实现
2020/04/13 Python
python能做哪方面的工作
2020/06/15 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
建筑工程专业学生的自我评价
2013/12/25 职场文书
高二美术教学反思
2014/01/14 职场文书
小学生家长评语大全
2014/02/10 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
小学二年级评语
2014/04/21 职场文书
消防安全宣传标语
2014/06/07 职场文书
排查整治工作方案
2014/06/09 职场文书
个性发展自我评价2015
2015/03/09 职场文书
个人工作决心书
2015/09/22 职场文书
2016高考寄语集锦
2015/12/04 职场文书