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 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
使用堆实现Top K算法(JS实现)
Dec 25 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 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
ajax实现无刷新分页(php)
2010/07/18 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
CentOS安装pillow报错的解决方法
2016/01/27 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
机器学习实战之knn算法pandas
2019/06/22 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
详解Python 函数参数的拆解
2020/09/02 Python
CSS3条纹背景制作的实战攻略
2016/05/31 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
生产总经理岗位职责
2013/12/19 职场文书
精彩的英文自荐信
2014/01/30 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
校本课程教学计划
2015/01/19 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
生产现场禁烟通知
2015/04/23 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Redis Stream类型的使用详解
2021/11/11 Redis