jquery next nextAll nextUntil siblings的区别介绍


Posted in Javascript onOctober 05, 2013

next:紧挨着$('')的一个元素

nextAll:在$('')以后的所有的同辈元素

nextUntil:until有直到。。。之前的意思,所以他表示$('')以后的所有的同辈元素,不过要在nextUntil参数之前,不包括匹配的元素本身

sibings:$('')前后的所有同辈元素

简单理解就是,next就是找他的弟弟/妹妹,nextAll就是找他所有的弟弟/妹妹,nextUntil就是找比他小一定年龄的弟弟/妹妹,siblings就是找他所有的哥哥/姐姐,还有他的所有的弟弟/妹妹。所以同理的同辈关系,prev,prevAll ,prevUntil

下面是简单的测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>Document</title> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script> 
</head> 
<body> 
<div class="first"> 
<a href="#">hhh</a> 
<h1>这是一个标题</h1> 
<p>这是一个test</p> 
<p>这是一个test</p> 
<p>这是一个test</p> 
<p>这是一个test</p> 
<div>hhha</div> 
<p>这是一个test</p> 
<p>这是一个test</p> 
</div> 
<script> 
$(function(){ 
//$('p:first').next().css('background','red'); 
//$('p:first').nextAll().css('background','yellow'); 
//$('p:first').nextUntil('div').css({'font-size':20,background:'red'}); 
//$('p:first').siblings().css('background','yellow'); 
}); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 图片预览效果 推荐
Dec 22 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
JS前端加密算法示例
Dec 22 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
ztree+ajax实现文件树下载功能
May 18 Javascript
jquery中animate动画积累的解决方法
Oct 05 #Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 #Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 #Javascript
javascript自启动函数的问题探讨
Oct 05 #Javascript
纯js简单日历实现代码
Oct 05 #Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 #Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 #Javascript
You might like
smarty的保留变量问题
2008/10/23 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
php多文件上传实现代码
2014/02/20 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
Grunt入门教程(自动任务运行器)
2015/08/06 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
小程序input数据双向绑定实现方法
2019/10/17 Javascript
JQuery获得内容和属性方法解析
2020/05/30 jQuery
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python with用法实例
2015/04/14 Python
Django验证码的生成与使用示例
2017/05/20 Python
python基本语法练习实例
2017/09/19 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
如何基于python生成list的所有的子集
2019/11/11 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
自主招生自荐信格式
2013/12/03 职场文书
上课说话检讨书大全
2014/01/22 职场文书
美术专业自荐信
2014/07/07 职场文书
处级干部考察材料
2014/12/24 职场文书
医生个人年终总结
2015/02/28 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
关于观后感的作文
2015/06/18 职场文书