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中对对层的控制
Dec 29 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
手机号码,密码正则验证
Sep 04 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
jquery手风琴特效插件
Feb 04 Javascript
javascript包装对象实例分析
Mar 27 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
基于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
全国中波电台频率表
2020/03/11 无线电
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
如何判断php数组的维度
2013/06/10 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
php实现微信支付之退款功能
2018/05/30 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
编写Python CGI脚本的教程
2015/06/29 Python
python构建深度神经网络(DNN)
2018/03/10 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
小学生班会演讲稿
2014/01/09 职场文书
火锅店营销方案
2014/02/26 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android