浅谈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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
window.onload使用指南
Sep 13 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
浅析Angular19 自定义表单控件
Jan 31 Javascript
React key值的作用和使用详解
Aug 23 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 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图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
任意位置显示html菜单
2007/02/01 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
Python向日志输出中添加上下文信息
2017/05/24 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
python中 * 的用法详解
2019/07/10 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
中国最大的名表商城:万表网
2016/08/29 全球购物
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2014年教师德育工作总结
2014/11/10 职场文书
2015年教学工作总结
2015/04/02 职场文书
Django显示可视化图表的实践
2021/05/10 Python
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android