浅谈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 相关文章推荐
键盘 keycode的值 javascript时触发事件时很有用的要素
Nov 02 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
Feb 11 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 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
图解上海144收音机
2021/03/02 无线电
php 表单数据的获取代码
2009/03/10 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
php while循环得到循环次数
2013/10/26 PHP
初识Laravel
2014/10/30 PHP
php格式化电话号码的方法
2015/04/24 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
php的debug相关函数用法示例
2016/07/11 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
关于php开启错误提示的总结
2019/09/24 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Python如何转换字符串大小写
2020/06/04 Python
python操作redis数据库的三种方法
2020/09/10 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
优秀学生干部推荐材料
2014/02/03 职场文书
高中军训感言400字
2014/02/24 职场文书
2014年统战工作总结
2014/12/09 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
小学语文教学随笔
2015/08/14 职场文书
python for循环赋值问题
2021/06/03 Python