浅谈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库 pj介绍
Dec 19 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
webpack是如何实现模块化加载的方法
Nov 06 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
vue脚手架项目创建步骤详解
Mar 02 Vue.js
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 高手之路(三)
2006/10/09 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
document.compatMode介绍
2009/05/21 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
Python运算符重载详解及实例代码
2017/03/07 Python
python实现键盘控制鼠标移动
2020/11/27 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
自考生自我鉴定范文
2013/10/01 职场文书
《小儿垂钓》教学反思
2014/02/23 职场文书
小学生倡议书范文
2014/05/13 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL