jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
更新时间：2013年04月26日 12:09:54 作者：
本篇文章介绍了，jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用。需要的朋友参考下
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");
结果如下：
注意：
1、不包括自己。即上面的例子中不包括#term-2本身
2、不包括参数1所匹配的元素。即头尾去掉。
3、如果选择器不匹配或未规定选择器，则会选取所有跟随的同胞；比如：
$("#term-2").nextUntil("dts").css("background-color", "red");
我把上面的选择器由原来的dt改为dts，得到的结果如下：
复制代码 代码如下:
$("#term-1").nextUntil("#term-3", "dd").css("color", "blue");
//或者采用DOM元素：
//var term3 = document.getElementById("term-3");
//$("#term-1").nextUntil(term3, "dd").css("color", "blue");
$("#term-1").nextUntil("#term-3", ".abc").css("color", "blue");
结果如下：
下面看一下不提供筛选的选择器的例子
$("#term-1").nextUntil("#term-3").css("color", "blue");
结果如下图所示：
prevUntil()方法和nextUntil()方法差不多，区别就是一个往上，一个往下。
相关文章
当用户在表单里数据完数据后，之间按enter键就可以执行查询或者保存的操作。实现的思路如下2014-04-04
这篇文章主要介绍了jQuery 操作input中radio的技巧的相关资料,非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧2016-07-07
ie8模式下click无反应点击option无反应的解决方法
点击select里面的option，将其赋值到上面的input，直接用jQuery写的，问题是在用IE8打开的时候，点击option没有任何反应2014-10-10
做web开发的朋友都应该掌握前端优化这个技巧，其中一个就是滚动延时加载。这个技巧应用在了很多地方，比如新浪微博网页版。以下就为大家详细介绍，需要的朋友可以参考下2013-07-07
使用jQuery.form.js/springmvc框架实现文件上传功能
这篇文章主要介绍了使用jQuery.form.js/springmvc框架实现文件上传功能，非常具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
JQuery制作的选项卡改进版，已经有人将这个效果改进下封装成一个完整的方法。2010-04-04
在本篇文章里小编给大家分享了关于Jquery获取radio选中值实例总结内容，有兴趣的朋友们可以学习下。2019-01-01
前端时间写项目用到了ajaxForm这个插件，可以用它提交表单和上传图片，听起来和正常的form表单提交没什么区别，只不过是ajax提交，无需刷新页面,下面通过实例给大家介绍jQuery表单插件ajaxForm，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了jQuery圆形统计图开发的方法,实例分析了circliful插件的用法与使用技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
本文主要对handlebars+require基本使用方法进行详细介绍，文章尾部会附上完整代码供大家参考。需要的朋友一起来看下吧2016-12-12
最新评论