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 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php实现的SESSION类
2014/12/02 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
javascript滚轮控制模拟滚动条
2016/10/19 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
vue实现信息管理系统
2020/05/30 Javascript
将Python代码打包为jar软件的简单方法
2015/08/04 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
python实现机器人行走效果
2018/01/29 Python
Python工厂函数用法实例分析
2018/05/14 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
七夕情人节促销方案
2014/06/07 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2016年教师节感言
2015/12/09 职场文书
电工实训心得体会
2016/01/14 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
Python面向对象之成员相关知识总结
2021/06/24 Python