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 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
js查找父节点的简单方法
Jun 28 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
Jun 12 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
手机端转换rem适应
Apr 01 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
React如何创建组件
Jun 27 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制作中间带自己定义图片二维码的方法
2014/01/27 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
JS location几个方法小姐
2008/07/09 Javascript
JavaScript的parseInt 进制问题
2009/05/07 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
在Python中进行自动化单元测试的教程
2015/04/15 Python
Python实用日期时间处理方法汇总
2015/05/09 Python
python实现数组插入新元素的方法
2015/05/22 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python实现随机梯度下降法
2020/03/24 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
中国梦演讲稿5分钟
2014/08/19 职场文书
十佳青年事迹材料
2014/08/21 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书