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学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
js自定义input文件上传样式
Oct 26 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
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
php GD绘制24小时柱状图
2008/06/28 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
jQuery prev ~ siblings选择器使用介绍
2013/08/09 Javascript
Bootstrap安装环境配置教程分享
2016/05/27 Javascript
jQuery获取单击节点对象的方法
2016/06/02 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
使用Python解析JSON数据的基本方法
2015/10/15 Python
python之Socket网络编程详解
2016/09/29 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
优秀士兵个人事迹材料
2014/01/19 职场文书
高中生的自我评价
2014/03/04 职场文书
法制宣传实施方案
2014/03/13 职场文书
片区教研活动总结
2014/07/02 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
入党培养人考察意见
2015/06/08 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
Python绘画好看的星空图
2022/03/17 Python