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 25 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
layui table设置前台过滤转义等方法
Aug 17 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP小技巧搜集,每个PHPer都来露一手
2007/01/02 PHP
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
js实现前端图片上传即时预览功能
2017/08/02 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
Python素数检测的方法
2015/05/11 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
美国在线工具商店:Acme Tools
2018/06/26 全球购物
小学教师自我鉴定
2013/11/07 职场文书
实习评语大全
2014/04/26 职场文书
护校行动方案
2014/05/31 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android