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

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()方法差不多,区别就是一个往上,一个往下。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
遍历
jquery prevuntil、jquery next prev、jquery prevall遍历、jquery nextuntil、jquery nextall 遍历,以便于您获取更多的相关知识。

时间: 2024-10-04 12:08:27

jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍_jquery的相关文章

jQuery遍历DOM元素与节点方法详解_jquery

本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

jQuery遍历之next()、nextAll()方法使用实例_jquery

jquery遍历:next()和nextAll()方法.实例如下: 复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript">  $(document).ready(function(){   //$(

jQuery fadeTo方法调整图片的透明度使用介绍_jquery

复制代码 代码如下: <head> <title></title> <style type="text/css"> .imgclass{ width:300px; height:300px; border:solid 1px red;} </style> <script src="jquery-1.9.1.js" type="text/javascript"></scr

jquery 关于event.target使用的几点说明介绍_jquery

event.target说明:引发事件的DOM元素. this和event.target的区别js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: this和event.target的相同点this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target); 这使我想起了以前写的一个例子: 复制代码 代码如下:     //del ev

jQuery源码分析-05异步队列 Deferred 使用介绍_jquery

5. 异步队列 Deferred 5.1 概述 异步队列是一个链式对象,增强对回调函数的管理和调用,用于处理异步任务. 异步队列有三种状态:初始化(unresolved),成功(resolved),失败(rejected). 执行哪些回调函数依赖于状态. 状态变为成功(resolved)或失败(rejected)后,将保持不变. 回调函数的绑定可以是同步,也可以是异步的,即可以在任何时候绑定. (本节中的 绑定 注册 增加 具有相同的含义) 5.2 关键方法 先看看jQuery. Deferre

jQuery学习之prop和attr的区别示例介绍_jquery

1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使

Jquery AJAX POST与GET之间的区别详细介绍_jquery

1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的) 防止 GET 的 等幂 访问 就在URL后面加上 ?+new Date();,[总之就是使每次访问的URL字符串不一样的] 设计WEB页面的时候 也应该遵守这个原则 2:一.谈Ajax的Get和Post的区

jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍_jquery

做项目的时候,我从后台传递过来的数据给一个文本框赋值,通过google浏览器, 当修改的时候发现没有修改,最后查了下原因,原来是jQuery中val和atrr("value",对浏览器的区别, 故总结如下: jquery中的val()和atrr('value'这两个的使用,假设有默认值的情况下,如果用val()赋值了,那么当修改这个值得时候,google不能获取最新的值,但是ie可以, 针对atrr('value'如果有默认值,那么当改变这个值得时候,ie和google都能获取最新的更

jquery中子元素和后代元素的区别示例介绍_jquery

今天学习jQuery的选择器: jQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 基本选择器:id,class,标签名,*,元素组合(div,span,p.myClass) 层次选择器: 难点: jquery中子元素和后代元素的区别 后代,就是当前元素的所有后代,都算, 子元素,就是当前元素的子集,再往下走就不算了. 具体的分析可以参考: 复制代码 代码如下: <div>This is <strong>very</strong> important