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 调试器简介
Feb 21 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
vue.js实例todoList项目
Jul 07 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
js实现前端界面导航栏下拉列表
Aug 27 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP实现的简单组词算法示例
2018/04/10 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
JavaScript实现弹出子窗口并传值给父窗口
2014/12/18 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
有关打架的检讨书
2014/01/25 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
搞笑的获奖感言
2014/08/16 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
个人年终总结开头
2015/03/06 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers