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 相关文章推荐
setTimeout和setInterval的深入理解
Nov 08 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
Aug 24 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
详解vue-router基本使用
Apr 18 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
js实现头像上传并且可预览提交
Dec 25 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
Codeigniter检测表单post数据的方法
2015/03/21 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
详解vue express启动数据服务
2017/07/05 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
python安装与使用redis的方法
2016/04/19 Python
Python提取网页中超链接的方法
2016/09/18 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
python通过zabbix api获取主机
2018/09/17 Python
python判断无向图环是否存在的示例
2019/11/22 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
董事长新年致辞
2015/07/29 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL