jQuery 遍历
来源：互联网 发布：java怎么随机生成名字 编辑：程序博客网 时间：2024/04/29 09:48
1.列表
jQuery 遍历函数
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
2.jQuery 遍历 - add() 方法
实例
找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象，并把它们的背景设置为黄色：
$("div").css("border", "2px solid red") .add("p") .css("background", "yellow");定义和用法
add() 方法将元素添加到匹配元素的集合中。
语法 1
.add(selector)
语法 2
.add(elements)
语法 3
.add(html)
语法 4
.add(jQueryObject)
语法 5
.add(selector, context)
3.jQuery 遍历 - andSelf() 方法
实例
找到所有 div，以及其中的所有段落，并为它们添加两个类名。请注意，由于未使用 .andSelf()，div 没有黄色背景色。
$("div").find("p").andSelf().addClass("border");$("div").find("p").addClass("background");定义和用法
add() 方法把堆栈中之前的元素集添加到当前集合。
语法
.andSelf()
详细说明
请思考这个拥有简单列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
以下代码的结果是项目 3,4,5 拥有红色背景：
$("li.third-item").nextAll().andSelf() .css("background-color", "red");首先，初始的选择器会定位项目 3，初始化的堆栈存有仅包含该项目的集合。调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。最后，调用 .andSelf() 会合并这两个集合，所创建的 jQuery 对象指向按照文档顺序的所有三个项目：{[<li.third-item>,<li>,<li> ]}。
4.jQuery 遍历 - children() 方法
实例
找到类名为 "selected" 的所有 div 的子元素，并将其设置为蓝色：
$("div").children(".selected").css("color", "blue");定义和用法
add() 方法返回匹配元素集合中每个元素的子元素，添加可选参数可通过选择器进行过滤。
语法
.children(selector)
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.children() 方法允许我们检索 DOM 树中的这些元素，并用匹配元素构造新的 jQuery 对象。.find() 和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。
请注意，与大多数 jQuery 方法一样，.children() 不返回文本节点；如果需要获得包含文本和注释节点在内的所有子节点，请使用 .contents()。
该方法接受一个选择器表达式作为可选参数，与我们传递到 $() 的参数的类型是相同的。如果应用该选择器，将测试元素是否匹配该表达式，以此筛选这些元素。
请思考这个带有基础的嵌套列表的页面：
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>如果我们从 level-2 列表开始，我们可以找到它的子元素：
$('ul.level-2').children().css('background-color', 'red');这行代码的结果是，项目 A, B, C 得到红色背景。由于我们没有应用选择器表达式，返回的 jQuery 对象包含了所有子元素。如果应用一个选择器的话，那么只会包括匹配的项目。
5.jQuery 遍历 - closest() 方法
实例
本例演示如何通过 closest() 完成事件委托。当被最接近的列表元素或其子后代元素被点击时，会切换黄色背景：
$( document ).bind("click", function( e ) { $( e.target ).closest("li").toggleClass("hilight"); });定义和用法
closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
语法
.closest(selector)
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙，却很重要：
请看下面的 HTML 片段：
<ul id="one" class="level-1"> <li class="item-i">I</li> <li id="ii" class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>
例子 1
假设我们执行一个从项目 A 开始的对 <ul> 元素的搜索：
$('li.item-a').closest('ul').css('background-color', 'red');这会改变 level-2 <ul> 的颜色，这是因为当向上遍历 DOM 树时会第一个遇到该元素。
例子 2
假设我们搜索的是 <li> 元素：
$('li.item-a').closest('li').css('background-color', 'red');这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前，.closest() 方法会从 li 元素本身开始搜索，直到选择器匹配项目 A 为止。
例子 3
我们可以传递 DOM 元素作为 context，在其中搜索最接近的元素。
var listItemII = document.getElementById('ii');$('li.item-a').closest('ul', listItemII).css('background-color', 'red');$('li.item-a').closest('#one', listItemII).css('background-color', 'green');以上代码会改变 level-2 <ul> 的颜色，因为它既是列表项 A 的第一个 <ul> 祖先，同时也是列表项 II 的后代。它不会改变 level-1 <ul> 的颜色，因为它不是 list item II 的后代。
6.jQuery 遍历 - contents() 方法
实例
找到段落中的所有文本节点，并用粗体标签包装它们。
$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");定义和用法
contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点。
语法
.contents()
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.contents() 方法允许我们检索 DOM 树中的这些元素的直接子节点，并用匹配元素构造新的 jQuery 对象。.contents() 和.children() 方法类似，不同的是前者在结果 jQuery 对象中包含了文本节点以及 HTML 元素。
.contents() 方法也可以用于获得 iframe 的内容文档，前提是该 iframe 与主页面在同一个域。
请思考下面这个带有一些文本节点的 <div>，每个节点被两个折行元素 (<br />) 分隔：
<div class="container"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br /><br /> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br /> <br /> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
我们可以使用 .contents() 方法来把文本块转换为形式良好的段落：
$('.container').contents().filter(function() { return this.nodeType == 3;}) .wrap('<p></p>').end().filter('br') .remove();这段代码首先会接收 <div class="container"> 的内容，然后滤过其文本节点，将文本节点封装入段落标签中。这是通过测试元素的 .nodeType 属性实现的。该属性存有指示节点类型的数字代码；文本节点使用代码 3。内容会被再次过滤，这次针对 <br /> 元素，这些元素会被移除。
7.jQuery 遍历 - each() 方法
实例
输出每个 li 元素的文本：
$("button").click(function(){ $("li").each(function(){ alert($(this).text()) });});定义和用法
each() 方法规定为每个匹配元素规定运行的函数。
提示：返回 false 可用于及早停止循环。
语法
$(selector).each(function(index,element))
必需。为每个匹配元素规定运行的函数。
- index - 选择器的 index 位置
- element - 当前的元素（也可使用 "this" 选择器）
8.jQuery 遍历 - end() 方法
实例
选择所有段落，找到这些段落中的 span 元素，然后将它们恢复为段落，并把段落设置为两像素的红色边框：
$("p").find("span").end().css("border", "2px red solid");定义和用法
end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
语法
.end()
详细说明
大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例，并生成一个匹配不同 DOM 元素集的新对象。当发生这种情况时，应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。如果我们需要老的元素集，可以使用 end() 从堆栈中弹出新集合。
假设页面中有一对很短的列表：
<ul class="first"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li></ul><ul class="second"> <li class="foo">list item 1</li> <li>list item 2</li> <li class="bar">list item 3</li></ul>
例子 1
主要是在利用 jQuery 的链条属性（命令链）时，jQuery 会比较有用。如果不使用命令链，我们一般是通过变量名来调用之前的对象，这样我们就不需要操作堆栈了。不过通过 end()，我们可以把所有方法调用串联在一起：
$('ul.first').find('.foo').css('background-color', 'red') .end().find('.bar').css('background-color', 'green');这条命令链检索第一个列表中类名为 foo 的项目，并把它们的背景设置为红色。end() 会将对象还原为调用 find() 之前的状态，所以第二个 find() 查找的是 <ul class="first"> 内的 '.bar' ，而不是在列表的 <li class="foo"> 中查找，并将匹配元素的背景设置为绿色。最后的结果是第一个列表中的项目 1 和项目 3 被设置了带颜色的背景，而第二个列表中的项目没有任何变化。
例子 2
这条长长的 jQuery 链可以可视化为结构化的代码块，筛选方法打开嵌套代码块，而 end() 方法用来关闭代码块：
$('ul.first').find('.foo') .css('background-color', 'red').end().find('.bar') .css('background-color', 'green').end();最后这个 end() 不是必需的，因为我们随后会丢弃这个 jQuery 对象。不过，如果按照这种形式编写代码，end() 就能提供视觉上的对称，以及规整程序的感觉，至少对于开发者来说更易阅读，当然代价则是由于进行了额外的调用，会有一点点性能损失。
9.jQuery 遍历 - eq() 方法
实例
通过为 index 为 2 的 div 添加适当的类，将其变为蓝色：
$("body").find("div").eq(2).addClass("blue");定义和用法
eq() 方法将匹配元素集缩减值指定 index 上的一个。
语法
.eq(index)
整数，指示元素的位置（最小为 0）。
如果是负数，则从集合中的最后一个元素往回计数。
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。
请看下面这个简单的列表：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
例子 1
我们可以把该方法应用到这个列表项目集：
$('li').eq(2).css('background-color', 'red');这个调用的结果是为项目 3 设置了红色背景。请注意，index 是基于零的，并且是在 jQuery 对象中引用元素的位置，而不是在 DOM 树中。
例子 2
如果提供负数，则指示从集合结尾开始的位置，而不是从开头开始。例如：
$('li').eq(-2).css('background-color', 'red');这次，项目 4 的背景变为红色，这是因为它是集合结尾开始的第二个。
例子 3
如果无法根据指定的 index 参数找到元素，则该方法构造带有空集的 jQuery 对象，length 属性为 0。
$('li').eq(5).css('background-color', 'red');这里，没有列表项会变为红色，这是因为 .eq(5) 指示的第六个列表项。
10.jQuery 遍历 - filter() 方法
实例
改变所有 div 的颜色，然后向类名为 "middle" 的类添加边框：
$("div").css("background", "#c8ebcc") .filter(".middle") .css("border-color", "red");定义和用法
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
语法
.filter(selector)
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.filter() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所使用的选择器会测试每个元素；所有匹配该选择器的元素都会包含在结果中。
请思考下面这个拥有简单列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li></ul>
我们可以向这个列表项集合应用该方法：
$('li').filter(':even').css('background-color', 'red');此调用的结果是将项目 1, 3, 5 的背景设置为红色，这是因为它们都匹配选择器（回忆一下，:even 和 :odd 均使用基于 0 的 index）。
使用过滤函数
使用该方法的第二个形式是，通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。
请看下面这段稍显复杂的 HTML 片段：
<ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li></ul>
我们可以选取这些列表项，然后基于其内容来筛选它们：
$('li').filter(function(index) { return $('strong', this).length == 1;}).css('background-color', 'red');11.jQuery 遍历 - find() 方法
实例
搜索所有段落中的后代 span 元素，并将其颜色设置为红色：
$("p").find("span").css('color','red');定义和用法
find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
语法
.find(selector)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.find() 方法允许我们在 DOM 树中搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。
.find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。
请思考下面这个简单的嵌套列表：
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>
我们将从列表 II 开始来查找其中的列表项：
$('li.item-ii').find('li').css('background-color', 'red');这次调研的结果是，项目 A、B、1、2、3 以及 C 均被设置了红色背景。即使项目 II 匹配选择器表达式，它也不会被包含在结果中；只会对后代进行匹配。
与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
选择器 context 是由 .find() 方法实现的；因此，$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。
对于 jQuery 1.6，我们还可以使用给定的 jQuery 集合或元素来进行筛选。还是上面的嵌套列表，我们首先这样写：
var $allListElements = $('li');然后将这个 jQuery 对象传递给 find 方法：
$('li.item-ii').find( $allListElements );上面的代码会返回一个 jQuery 集合，其中包含属于列表 II 后代的列表元素。
类似地，也可以传递一个元素：
var item1 = $('li.item-1')[0];$('li.item-ii').find( item1 ).css('background-color', 'red');这次调用的结果是项目 1 被设置为红色背景。
12.jQuery 遍历 - first() 方法
实例
高亮显示段落中的第一个 span ：
$("p span").first().addClass('highlight');定义和用法
first() 将匹配元素集合缩减为集合中的第一个元素。
语法
.first()
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.first() 方法会用第一个匹配元素构造一个新的 jQuery 对象。
请思考下面这个带有简单列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
我们可以对这个列表项集合应用该方法：
$('li').first().css('background-color', 'red');这次调用的结果是，第一个项目被设置为红色背景。
13.jQuery 遍历 - has() 方法
实例
检测某个元素是否在另一个元素中：
$("ul").append("<li>" + ($("ul").has("li").length ? "Yes" : "No") + "</li>");$("ul").has("li").addClass("full");定义和用法
has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。
语法
.has(selector)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.has() 方法用匹配元素的子集来构造一个新的 jQuery 对象。所使用的选择器用于检测匹配元素的后代；如果任何后代元素匹配该选择器，该元素将被包含在结果中。
请思考下面这个带有嵌套列表的页面：
<ul> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2-a</li> <li>list item 2-b</li> </ul> </li> <li>list item 3</li> <li>list item 4</li></ul>
我们可以对列表项集合应用该方法，就像这样：
$('li').has('ul').css('background-color', 'red');该调用的结果是，项目 2 的背景被设置为红色，这是因为该项目是后代中唯一拥有 <ul> 的 <li>。
14.jQuery 遍历 - is() 方法
实例
返回 false，因为 input 元素的父元素是 p 元素：
var isFormParent = $("input[type='checkbox']").parent().is("form"); $("div").text("isFormParent = " + isFormParent);定义和用法
is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
语法
.is(selector)
详细说明
与其他筛选方法不同，.is() 不创建新的 jQuery 对象。相反，它允许我们在不修改 jQuery 对象内容的情况下对其进行检测。这在 callback 内部通常比较有用，比如事件处理程序。
假设我们有一个列表，其中两个项目包含子元素：
<ul> <li>list <strong>item 1</strong></li> <li><span>list item 2</span></li> <li>list item 3</li></ul>
您可以向 <ul> 元素添加 click 处理程序，然后把代码限制为只有当列表项本身，而非子元素，被点击时才进行触发：
$("ul").click(function(event) { var $target = $(event.target); if ( $target.is("li") ) { $target.css("background-color", "red"); }});现在，当用户点击的是第一个列表项中的单词 "list" 或第三个列表项中的任何单词时，被点击的列表项会被设置为红色背景。不过，当用户点击第一个列表项中的 item 1 或第二个列表项中的任何单词时，都不会有任何变化，这是因为这上面的情况中，事件的目标分别是 <strong> 是 <span>。
请您注意，对于带有位置性选择器的选择器表达式字符串，比如 :first、:gt() 或者 :even，位置性筛选是针对传递到 .is() 的 jQuery 对象进行的，而非针对包含文档。所以对于上面的 HTML 来说，诸如 $("li:first").is("li:last") 的表达式返回 true，但是 $("li:first-child").is("li:last-child") 返回 false。
使用函数
该方法的第二种用法是，对基于函数而非选择器的相关元素的表达式进行求值。对于每个元素来说，如果该函数返回 true，则 .is() 也返回 true。例如，下面是稍微复杂的 HTML 片段：
<ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
您可以向每个 <li> 添加 click 处理程序，以计算在被点击的 <li> 内部 <strong> 元素的数目：
$("li").click(function() { var $li = $(this), isWithTwo = $li.is(function() { return $('strong', this).length === 2; }); if ( isWithTwo ) { $li.css("background-color", "green"); } else { $li.css("background-color", "red"); }});15.jQuery 遍历 - last() 方法
实例
高亮显示段落中的最后一个 span ：
$("p span").last().addClass('highlight');定义和用法
last() 将匹配元素集合缩减为集合中的最后一个元素。
语法
.last()
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.last() 方法会用最后一个匹配元素构造一个新的 jQuery 对象。
请思考下面这个带有简单列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
我们可以对这个列表项集合应用该方法：
$('li').last().css('background-color', 'red');这次调用的结果是，最后一个项目被设置为红色背景。
16.jQuery 遍历 - map() 方法
实例
构建表单中所有值的列表：
$("p").append( $("input").map(function(){ return $(this).val();}).get().join(", ") );定义和用法
map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
语法
.map(callback(index,domElement))
详细说明
由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
.map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单：
<form method="post" action=""> <fieldset> <div> <label for="two">2</label> <input type="checkbox" value="2" id="two" name="number[]"> </div> <div> <label for="four">4</label> <input type="checkbox" value="4" id="four" name="number[]"> </div> <div> <label for="six">6</label> <input type="checkbox" value="6" id="six" name="number[]"> </div> <div> <label for="eight">8</label> <input type="checkbox" value="8" id="eight" name="number[]"> </div> </fieldset></form>
我们能够获得复选框 ID 组成的逗号分隔的列表：
$(':checkbox').map(function() { return this.id;}).get().join(',');本次调用的结果是字符串："two,four,six,eight"。
在 callback 函数内部，this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项，或者是要被插入结果集中的数据项的数组。如果返回的是数组，数组内的元素会被插入集合中。如果函数返回 null 或 undefined，则不会插入任何元素。
17.jQuery 遍历 - next() 方法
实例
查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落：
$("p").next(".selected").css("background", "yellow");定义和用法
next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。
语法
.next(selector)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素，并用匹配元素构造新的 jQuery 对象。
该方法接受可选的选择器表达式，类型与我传递到 $() 函数中的相同。如果紧跟的同胞元素匹配该选择器，则会留在新构造的 jQuery 对象中；否则会将之排除。
请思考下面这个带有简单列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
如果我们从项目三开始，则能够找到其后出现的元素：
$('li.third-item').next().css('background-color', 'red');这次调用的结果是，项目 4 被设置为红色背景。由于我们没有应用选择器表达式，紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器，在包含它之前会检测是否匹配。
18.jQuery 遍历 - nextAll() 方法
实例
查找第一个 div 之后的所有类名，并为他们添加类名：
$("div:first").nextAll().addClass("after");定义和用法
nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的。
语法
.nextAll(selector)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.nextAll() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素，并用匹配元素构造新的 jQuery 对象。
该方法接受可选的选择器表达式，类型与我传递到 $() 函数中的相同。如果应用选择器，则将通过检测元素是否匹配来对它们进行筛选。
请思考下面这个带有简单列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
如果我们从项目三开始，那么我们能够找到其后出现的元素：
$('li.third-item').nextAll().css('background-color', 'red');这次调用的结果是，项目 4 和 5 被设置为红色背景。由于我们没有应用选择器表达式，紧跟的这个元素很明确地被包括为对象的一部分。如果我们已经应用了选择器，在包含它之前会检测是否匹配。
19.jQuery 遍历 - nextUntil() 方法
实例
查找跟随 <dt id="term-2"> 的同胞元素，直到下一个 <dt>，然后将它们设置为红色背景色。同时，找到跟随 <dt id="term-1"> 的 <dd> 同胞元素，直到 <dt id="term-3">，并为它们设置蓝色文本颜色。
$("#term-2").nextUntil("dt").css("background-color", "red");var term3 = document.getElementById("term-3");$("#term-1").nextUntil(term3, "dd").css("color", "blue");定义和用法
nextUntil() 获得每个元素所有跟随的同胞元素，但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素。
语法 1
.nextUntil(selector,filter)
语法 2
.nextUntil(element,filter)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.nextUntil() 方法允许我们搜索 DOM 树中的元素跟随的同胞元素，当遇到被该方法的参数所匹配的元素时会停止搜索。返回的新 jQuery 对象包含所有跟随的同胞元素，但不包含被参数匹配的元素。
如果选择器不匹配或未规定选择器，则会选取所有跟随的同胞；如果不提供供筛选的选择器，则该方法选取的元素与 .nextAll() 方法相同。
对于 jQuery 1.6，DOM 节点或 jQuery 对象，而不是选择器，可传递到 .nextUntil() 方法。
该方法接受可选的选择器表达式作为其第二参数。如果指定该参数，则将通过检测元素是否匹配该选择器来筛选它们。
20.jQuery 遍历 - not() 方法
实例
从包含所有段落的集合中删除 id 为 "selected" 的段落：
$("p").not("#selected")定义和用法
not() 从匹配元素集合中删除元素。
语法 1
.not(selector)
语法 2
.not(element)
语法 3
.not(function(index))
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.not() 方法会用匹配元素的子集构造一个新的 jQuery 对象。所应用的选择器会检测每个元素；不匹配该选择器的元素会被包含在结果中。
请思考下面这个带有简单列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
我们可以向列表项集应用该方法：
$('li').not(':even').css('background-color', 'red');这次调用的结果是将项目 2 和 4 设置为红色背景，这是因为它们不匹配选择器（回忆一下，:even 和 :odd 均使用基于 0 的 index）。
移除具体的元素
.not() 方法的第二个版本允许我们从匹配集中删除元素，假设我们之前已经通过其他手段找到了这些元素。例如，设想一个列表已经将 id 应用到其中一个项目中：
<ul> <li>list item 1</li> <li>list item 2</li> <li id="notli">list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
我们可以使用原生的 JavaScript 函数 getElementById() 读取第三个列表项，然后把它从 jQuery 对象中删除：
$('li').not(document.getElementById('notli')).css('background-color', 'red');这条语句改变项目 1、2、3 和 5 的背景色。我们可以用更简单的 jQuery 表达式来完成同样的事情，但是这项技术在比方说其他库提供对纯 DOM 节点的引用时会很有用。
对于 jQuery 1.4，.not() 方法能够采用函数作为其参数，与 .filter() 方法相同。其函数返回 true 的元素会被排除在过滤集之外；所有其他元素将被包含其中。
21.jQuery 遍历 - offsetParent() 方法
实例
从包含所有段落的集合中删除 id 为 "selected" 的段落：
$("p").not("#selected")定义和用法
offsetParent() 获得被定位的最近祖先元素。
语法
.offsetParent()
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.offsetParent() 方法允许我们搜索 DOM 树中元素的祖先，并构造一个由最近的定位祖先元素包围的 jQuery 对象。定位元素指的是，元素的 CSS position 属性设置为 relative、absolute 或 fixed。在为表演动画计算偏移或在页面上放置对象时，该信息会很有用处。
请思考带有基本嵌套列表的页面，其中带有定位元素：
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii" style="position: relative;">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>如果我们从项目 A 开始，我们可以找到其定位祖先元素：
$('li.item-a').offsetParent().css('background-color', 'red');这会改变被定位的项目 II 的背景色。
22.jQuery 遍历 - parent() 方法
实例
查找每个段落的带有 "selected" 类的父元素：
$("p").parent(".selected")定义和用法
parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。
.parent(selector)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素，并用匹配元素构造一个新的 jQuery 对象。.parents() 和 .parent() 方法类似，不同的是后者沿 DOM 树向上遍历单一层级。
该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面：
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>
如果我们从项目 A 开始，则可找到其父元素：
$('li.item-a').parent().css('background-color', 'red');此次调用的结果是，为 level-2 列表设置红色背景。由于我们未应用选择器表达式，父元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。
23.jQuery 遍历 - parents() 方法
实例
查找每个 b 元素的所有父元素：
$("b").parents()定义和用法
parents() 获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。
.parents(selector)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素，并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。元素是按照从最近的父元素向外的顺序被返回的。.parents() 和.parent() 方法类似，不同的是后者沿 DOM 树向上遍历单一层级。
该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面：
<ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li></ul>
如果我们从项目 A 开始，则可找到其祖先元素：
$('li.item-a').parents().css('background-color', 'red');此次调用的结果是，level-2 列表、项目 II 以及 level-1 列表等元素（沿 DOM 树一路向上直到 <html>）设置红色背景。由于我们未应用选择器表达式，父元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。由于我们未应用选择器表达式，所有祖先元素都是返回的 jQuery 对象的组成部分。如果已应用选择器，则只会包含其中的匹配项目。
24.jQuery 遍历 - parentsUntil() 方法
实例
查找 <li class="item-a"> 的祖先元素，直到 <ul class="level-1">，并将它们设置为红色背景。同时，找到 <li class="item-2"> 的所有类名为 "yes" 的祖先元素，直到 <ul class="level-1">，然户为它们设置蓝色边框：
$("li.item-a").parentsUntil(".level-1") .css("background-color", "red");$("li.item-2").parentsUntil( $("ul.level-1"), ".yes" ) .css("border", "3px solid blue");定义和用法
parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素。
语法 1
.parentsUntil(selector,filter)
语法 2
.parentsUntil(element,filter)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.parentsUntil() 方法允许我们在 DOM 树中搜索这些元素的祖先元素，直到遇到被选择器（传递到方法中的参数）匹配的元素为止。返回的 jQuery 对象包含所有祖先元素，但不包括由 .parentsUntil() 方法规定的选择器匹配的那个元素。
如果不匹配或未应用选择器，则将选区所有祖先元素；在这种情况下，该方法选取的元素与未提供选择器时的 .parents() 相同。
对于 jQuery 1.6，DOM 节点或 jQuery 对象，而不是选择器，可用作 .parentsUntil() 方法的第一个参数。
该方法接受可选的选择器表达式作为其第二参数。如果应用这个参数，则将通过检测元素是否匹配该选择器对元素进行筛选。
25.jQuery 遍历 - prev() 方法
实例
检索每个段落，找到类名为 "selected" 的前一个同胞元素：
$("p").prev(".selected")定义和用法
prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。
.prev(selector)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.prev() 方法允许我们在 DOM 树中搜索这些元素的前一个同胞元素，并用匹配元素构造一个新的 jQuery 对象。
该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
如果我们从第三个项目开始，则可找到该元素之间的紧邻元素：
$('li.third-item').prev().css('background-color', 'red');此处调用的结果是将项目 2 设置为红色背景。由于我们未应用选择器表达式，前一个元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。
26.jQuery 遍历 - prevAll() 方法
实例
定位最后一个 div 之前的所有 div，并为它们添加类：
$("div:last").prevAll().addClass("before");定义和用法
prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素，使用选择器进行筛选是可选的。
语法
.prevAll(selector)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.prevAll() 方法允许我们在 DOM 树中搜索这些元素前面的同胞元素，并用匹配元素构造一个新的 jQuery 对象。
该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
如果我们从第三个项目开始，则可找到该元素之间的同胞元素：
$('li.third-item').prevAll().css('background-color', 'red');此处调用的结果是将项目 2 和项目 1 设置为红色背景。由于我们未应用选择器表达式，这些前面的元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测这些元素是否匹配选择器。
27.jQuery 遍历 - prevUntil() 方法
实例
查找 <dt id="term-2"> 之前的同胞元素，直到前一个 <dt>，并将它们设置为红色。同时，查找 <dt id="term-3"> 前面的 <dd> 同胞，直到 <dt id="term-1">，并把它们设置为蓝色文本：
$("#term-2").prevUntil("dt").css("background-color", "red");var term1 = document.getElementById('term-1');$("#term-3").prevUntil(term1, "dd").css("color", "green");定义和用法
prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素，但不包括被选择器、DOM 节点或 jQuery 对象匹配的元素。
语法 1
.prevUntil(selector, filter)
语法 2
.prevUntil(element, filter)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.prevUntil() 方法允许我们在 DOM 树中搜索这些元素前面的同胞元素，直到遇到被选择器（传递到方法中的参数）匹配的元素为止。返回的 jQuery 新对象包含所有前面的同胞元素，但不包括由 .prevUntil() 方法规定的选择器匹配的那个元素；所返回元素的顺序是从最近的同胞元素到最远的那个。
如果不匹配或未应用选择器，则将选区所有前面的同胞元素；在这种情况下，该方法选取的元素与未提供选择器时的 .prevAll() 相同。
对于 jQuery 1.6，DOM 节点或 jQuery 对象，而不是选择器，可用作 .prevUntil() 方法的第一个参数。
该方法接受可选的选择器表达式作为其第二参数。如果应用这个参数，则将通过检测元素是否匹配该选择器对元素进行筛选。
28.jQuery 遍历 - siblings() 方法
实例
查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：
$("p").siblings(".selected")定义和用法
siblings() 获得匹配集合中每个元素的同胞，通过选择器进行筛选是可选的。
语法
.siblings(selector)
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.siblings() 方法允许我们在 DOM 树中搜索这些元素的同胞元素，并用匹配元素构造一个新的 jQuery 对象。
该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li class="third-item">list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
如果我们从第三个项目开始，则可找到该元素的同胞元素：
$('li.third-item').siblings().css('background-color', 'red');此处调用的结果是将项目 1、2、4 和 5 的背景设置为红色。 设置为红色背景。由于我们未应用选择器表达式，所有同胞元素很自然地成为了对象的一部分。如果已应用选择器，则只会包含四个列表中的匹配的项目。
原始元素不包含在同胞元素中，当我们打算找到 DOM 树的特定层级上的所有元素时，记住一点很重要。
29.jQuery 遍历 - slice() 方法
实例
选中所有段落，然后将所选内容缩减为只包含第一和第二个段落：
$("p").slice(0, 2).wrapInner("");定义和用法
slice() 把匹配元素集合缩减为指定的指数范围的子集。
语法
.slice(selector,end)
基于 0 的整数值，指示开始选取元素的位置。
如果是负数，则指示从集合末端开始的偏移量。
end基于 0 的整数值，指示结束选取元素的位置。
如果是负数，则指示从集合末端开始的偏移量。
如果省略，则选取范围会在集合末端结束。
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象，.slice() 方法用匹配元素的子集构造一个新的 jQuery 对象。已应用的 index 参数集合中其中一个元素的位置；如果省略 end 参数，则 index 之后的所有的所有元素都会包含在结果中。
请思考这个带有简单列表的页面：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul>
我们可以向列表项集合应用该方法：
$('li').slice(2).css('background-color', 'red');此次调用的结果是项目 3、4 和 5 的背景被设置为红色。请注意，已应用的 index 参数基于零，引用的是 jQuery 对象中元素的位置，而非 DOM 树中的。
end 参数允许我们更进一步地限制选取范围。比如：
$('li').slice(2, 4).css('background-color', 'red');现在，只有项目 3 和 4 会被选取。再次说明，index 是基于零的；范围会延伸到（但不包含）指定的 index。
负的指数
jQuery 的 .slice() 方法模仿了 JavaScript 数组对象的 .slice() 方法。它所模仿的特性之一是向 start 或 end 参数传递负数的能力。如果提供负数，则指示的是从集合结尾开始的一个位置，而非从开头。例如：
$('li').slice(-2, -1).css('background-color', 'red');这次，只有列表项 4 会变红，这是因为该项目是介于从结尾计数的二 (-2) 与从结尾计数的一 (-1) 的之间的范围中的唯一项目。
___________________________________________________________________________________________________________________________________
转载出处:http://blog.csdn.net/eqera/article/details/8441722
- JQuery遍历
- JQUERY遍历
- Jquery遍历
- jquery遍历
- jQuery 遍历
- jQuery 遍历
- jQuery 遍历
- jquery 遍历
- jQuery 遍历
- jQuery 遍历
- jQuery遍历
- JQuery 遍历
- jQuery 遍历
- jQuery遍历
- jQuery 遍历
- JQuery 遍历
- jQuery遍历
- jquery 遍历
- oracle 的一些属性整理【工作接触】
- arcgis服务报错 HTTP Error 503。The service is unavailable
- Makefile详解
- Javascript继承机制的设计思想
- BlueTooth: 蓝牙与蓝牙4.0技术细节
- jQuery 遍历
- Eclipse修改android工程的图标显示
- Ogre嵌入MFC傻瓜完全教程（二）
- 西出阳关无故人。
- php-fpm 安装APC 报错
- xcode上编译c语言程序报错：ld: x duplicate symbol for architecture x86_64 clang: error: linker command failed w
- Hibernate3.3.2+Spring2.5.5+Struts2.1.6+Extjs3.0.0 Annotations注解框架整合及其代码分享
- 安卓代码优化 使用ImageLoader实现图片异步加载
- 简单的分页存储过程 php mysql mysqli扩展
