浅谈jquery中next与siblings的区别


Posted in Javascript onOctober 27, 2016

siblings([expr]):

概述  

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

[expr] :可以用可选的表达式进行筛选。用于筛选同辈元素的表达式

示例

找到每个div的所有同辈元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").siblings()

结果:

[ <p>Hello</p>, <p>And Again</p> ]

找到每个div的所有同辈元素中带有类名为selected的元素。

HTML 代码:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:

$("div").siblings(".selected")

结果:

[ <p class="selected">Hello Again</p> ] next([expr]) :

 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

示例

描述:

找到每个段落的后面紧邻的同辈元素。

HTML 代码:

 

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

 jQuery 代码:

$("p").next()

结果:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

描述:

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

nextAll([expr]):查找当前元素之后所有的同辈元素。

示例:

描述:

给第一个div之后的所有元素加个类

HTML 代码:

<div></div><div></div><div></div><div></div>

jQuery 代码:

$("div:first").nextAll().addClass("after");

结果:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

实际应用案例

删除第一个tr元素后面所有tr,然后在重新创建这些tr:

$(".rili_tab01 tr:first").next().remove();
var retRow = "<tr><td>"+ret["eventTime"]+"</td><td >"+ret["eventCountry"]+"</td><td>"+ret["eventContent"]+"</td></tr>";
$(".rili_tab01 tr:last").after(retRow);

这是尝试之后能够正确显示的,下面用另一种方式就只能完成第一步
$(".rili_tab01 tr:first").siblings.remove();

重新创建tr元素的将不能正确执行

换成siblings()也是可以的$(".rili_tab01 tr:first").siblings().remove();

发现问题了,用错了siblings方法了,正确的是加括弧的,

$(".rili_tab01 tr:first").siblings().remove();
var retRow = "<tr><td>"+ret["eventTime"]+"</td><td >"+ret["eventCountry"]+"</td><td>"+ret["eventContent"]+"</td></tr>";
 $(".rili_tab01 tr:last").after(retRow);

以上就是小编为大家带来的浅谈jquery中next与siblings的区别全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javascript 网页跳转的方法
Dec 24 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
Oct 22 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
vue多级多选菜单组件开发
Sep 08 #Javascript
使用Javascript监控前端相关数据的代码
Oct 27 #Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 #Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 #Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 #Javascript
vue插件tab选项卡使用小结
Oct 27 #Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 #Javascript
You might like
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
原生js操作checkbox用document.getElementById实现
2013/10/12 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
微信小程序 教程之wxapp视图容器 swiper
2016/10/19 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Python龙贝格法求积分实例
2020/02/29 Python
基于python实现删除指定文件类型
2020/07/21 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
物业管理个人自我评价
2013/11/08 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
党员剖析材料范文
2014/09/30 职场文书
关于运动会广播稿300字
2014/10/05 职场文书