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框架的AJAX实例代码
Nov 03 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
原生js实现可爱糖果数字时间特效
Dec 30 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
destoon二次开发入门示例
2014/06/20 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
常用简易JavaScript函数
2009/04/09 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
详解JavaScript之ES5的继承
2020/07/08 Javascript
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
Python3正则匹配re.split,re.finditer及re.findall函数用法详解
2018/06/11 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
怎样自定义一个异常类
2016/09/27 面试题
五年级语文教学反思
2014/01/30 职场文书
迎八一活动主题
2014/01/31 职场文书
班主任班级寄语大全
2014/04/04 职场文书
精神文明单位申报材料
2014/05/02 职场文书
运动会演讲稿200字
2014/08/25 职场文书
村长党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年暑期见闻
2015/07/14 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Pygame Event事件模块的详细示例
2021/11/17 Python