jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍


Posted in Javascript onApril 26, 2013

nextUntil() 获得每个元素所有跟随的同胞元素,当有参数时,则直到遇到该方法的参数所匹配的元素时会停止搜索。返回的新 jQuery 对象包含所有跟随的同胞元素,但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素。如果没有参数,则会选取所有跟随的同胞元素,此时与.nextAll()方法相同。

语法一:

.nextUntil(selector,filter)

语法二:
.nextUntil(element,filter)

详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.nextUntil() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素,当遇到被该方法的参数所匹配的元素时会停止搜索。返回的新 jQuery 对象包含所有跟随的同胞元素,但不包含被参数匹配的元素。

如果选择器不匹配或未规定选择器,则会选取所有跟随的同胞,则该方法选取的元素与 .nextAll() 方法相同。

对于 jQuery 1.6,DOM 节点或 jQuery 对象,而不是选择器,可传递到 .nextUntil() 方法。

该方法接受可选的选择器表达式作为其第二参数。如果指定该参数,则将通过检测元素是否匹配该选择器来筛选它们。

先看下例子:

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd class="abc">definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>
  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>
  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

$("#term-2").nextUntil("dt").css("background-color", "red");

结果如下:

jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

注意:

1、不包括自己。即上面的例子中不包括#term-2本身

2、不包括参数1所匹配的元素。即头尾去掉。

3、如果选择器不匹配或未规定选择器,则会选取所有跟随的同胞;比如:

$("#term-2").nextUntil("dts").css("background-color", "red");

我把上面的选择器由原来的dt改为dts,得到的结果如下:

jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

$("#term-1").nextUntil("#term-3", "dd").css("color", "blue");
//或者采用DOM元素:
//var term3 = document.getElementById("term-3");
//$("#term-1").nextUntil(term3, "dd").css("color", "blue");

jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

$("#term-1").nextUntil("#term-3", ".abc").css("color", "blue");

结果如下:

jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

下面看一下不提供筛选的选择器的例子

$("#term-1").nextUntil("#term-3").css("color", "blue");

结果如下图所示:

jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

prevUntil()方法和nextUntil()方法差不多,区别就是一个往上,一个往下。

Javascript 相关文章推荐
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
JS实现图片切换效果
Nov 17 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 #Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 #Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 #Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 #Javascript
jQuery.Validate验证库的使用介绍
Apr 26 #Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 #Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 #Javascript
You might like
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
yii添删改查实例
2015/11/16 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
QUnit jQuery的TDD框架
2010/11/04 Javascript
Js四则运算函数代码
2012/07/21 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
jquery 使用简明教程
2014/03/05 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
python 实现屏幕录制示例
2019/12/23 Python
Python同时处理多个异常的方法
2020/07/28 Python
python如何调用php文件中的函数详解
2020/12/29 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
活动总结书
2014/05/08 职场文书