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 相关文章推荐
图片之间的切换
Jun 26 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jQuery中的select操作详解
Nov 29 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
微信小程序之选项卡的实现方法
Sep 29 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
使用C++为node.js写扩展模块
2015/04/22 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JavaScript数组去重的五种方法
2015/11/05 Javascript
js实现简单的验证码
2015/12/25 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python sys.argv[]用法实例详解
2018/05/25 Python
python检测IP地址变化并触发事件
2018/12/26 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python yield的用法实例分析
2020/03/06 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
中学教师请假制度
2014/02/03 职场文书
语文教学随笔感言
2014/02/18 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python