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中Object和Function的关系的三段简单代码
Jun 27 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
ES6中Array.includes()函数的用法
Sep 20 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
elementUI同一页面展示多个Dialog的实现
Nov 19 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
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
python executemany的使用及注意事项
2017/03/13 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Python冲顶大会 快来答题!
2018/01/17 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
基于Python的PIL库学习详解
2019/05/10 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
求职简历中的自我评价分享
2013/12/08 职场文书
学习经验演讲稿
2014/05/10 职场文书
党员干部一句话承诺
2014/05/30 职场文书
5s标语大全
2014/06/23 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2015年纪委工作总结
2015/05/13 职场文书
导游词之峨眉山
2019/12/16 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript