jQuery 遍历

最新推荐文章于 2018-06-19 10:44:24 发布

zuoanlove

最新推荐文章于 2018-06-19 10:44:24 发布

阅读量324

点赞数

jQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

转载自：http://blog.csdn.net/eqera/article/details/8441722

1.列表

jQuery 遍历函数

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

函数	描述
.add()	将元素添加到匹配元素的集合中。
.andSelf()	把堆栈中之前的元素集添加到当前集合中。
.children()	获得匹配元素集合中每个元素的所有子元素。
.closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.contents()	获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
.each()	对 jQuery 对象进行迭代，为每个匹配元素执行函数。
.end()	结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
.eq()	将匹配元素集合缩减为位于指定索引的新元素。
.filter()	将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
.first()	将匹配元素集合缩减为集合中的第一个元素。
.has()	将匹配元素集合缩减为包含特定元素的后代的集合。
.is()	根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
.last()	将匹配元素集合缩减为集合中的最后一个元素。
.map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
.next()	获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil()	获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.not()	从匹配元素集合中删除元素。
.offsetParent()	获得用于定位的第一个父元素。
.parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.parents()	获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
.parentsUntil()	获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
.prev()	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil()	获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
.siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
.slice()	将匹配元素集合缩减为指定范围的子集。

2.jQuery 遍历 - add() 方法

实例

找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象，并把它们的背景设置为黄色：

$("div").css("border", "2px solid red")
        .add("p")
        .css("background", "yellow");

定义和用法

add() 方法将元素添加到匹配元素的集合中。

语法 1

.add(selector)

参数	描述
selector	字符串值，表示查找供添加到匹配元素集合的元素的选择器表达式。

语法 2

.add(elements)

参数	描述
elements	添加到匹配元素集合的一个或多个元素。

语法 3

.add(html)

参数	描述
html	添加到匹配元素集合的 HTML 片段。

语法 4

.add(jQueryObject)

参数	描述
jQueryObject	添加到匹配元素集合的已有 jQuery 对象。

语法 5

.add(selector, context)

参数	描述
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)

参数	描述
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)

参数	描述
selector	字符串值，包含匹配元素的选择器表达式。

详细说明

如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙，却很重要：

.closest()	.parents()
从当前元素开始	从父元素开始
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。	沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的 jQuery 对象	返回包含零个、一个或多个元素的 jQuery 对象

请看下面的 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))

参数	描述
function(index,element)	必需。为每个匹配元素规定运行的函数。 index - 选择器的 index 位置 element - 当前的元素（也可使用 "this" 选择器）

参数

描述

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)

参数	描述
index	整数，指示元素的位置（最小为 0）。如果是负数，则从集合中的最后一个元素往回计数。

参数

描述

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)

参数	描述
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)

参数	描述
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)

参数	描述
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)

参数	描述
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))

参数	描述
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)

参数	描述
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)

参数	描述
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)

参数	描述
selector	字符串值，包含指示在何处停止匹配跟随的同胞元素的选择器表达式。
filter	字符串值，包含用于匹配元素的选择器表达式。

语法 2

.nextUntil(element,filter)

参数	描述
element	指示在何处停止匹配跟随的同胞元素的 DOM 节点或 jQuery 对象。
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)

参数	描述
selector	字符串值，包含用于匹配元素的选择器表达式。

语法 2

.not(element)

参数	描述
element	一个或多个需要从匹配集中删除的 DOM 元素。

语法 3

.not(function(index))

参数	描述
function(index)	用于检测集合中每个元素的函数。this 是当前 DOM 元素。

详细说明

如果给定一个表示 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)

参数	描述
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)

参数	描述
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)

参数	描述
selector	可选。字符串值，规定在何处停止对祖先元素进行匹配的选择器表达式。
filter	可选。字符串值，包含用于匹配元素的选择器表达式。

语法 2

.parentsUntil(element,filter)

参数	描述
element	可选。DOM 节点或 jQuery 对象，指示在何处停止对祖先元素的匹配。
filter	可选。字符串值，包含用于匹配元素的选择器表达式。

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.parentsUntil() 方法允许我们在 DOM 树中搜索这些元素的祖先元素，直到遇到被选择器（传递到方法中的参数）匹配的元素为止。返回的 jQuery 对象包含所有祖先元素，但不包括由 .parentsUntil() 方法规定的选择器匹配的那个元素。

如果不匹配或未应用选择器，则将选区所有祖先元素；在这种情况下，该方法选取的元素与未提供选择器时的 .parents() 相同。

对于 jQuery 1.6，DOM 节点或 jQuery 对象，而不是选择器，可用作 .parentsUntil() 方法的第一个参数。

该方法接受可选的选择器表达式作为其第二参数。如果应用这个参数，则将通过检测元素是否匹配该选择器对元素进行筛选。

25.jQuery 遍历 - prev() 方法

实例

检索每个段落，找到类名为 "selected" 的前一个同胞元素：

$("p").prev(".selected")

定义和用法

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素，通过选择器进行筛选是可选的。

.prev(selector)

参数	描述
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)

参数	描述
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)

参数	描述
selector	可选。字符串值，包含指示在何处停止匹配前方同胞元素的选择器表达式。
filter	可选。字符串值，包含用于匹配元素的选择器表达式。

语法 2

.prevUntil(element, filter)

参数	描述
element	可选。指示在何处停止匹配前方同胞元素的 DOM 节点或 jQuery 对象。
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)

参数	描述
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)

参数	描述
selector	基于 0 的整数值，指示开始选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。
end	基于 0 的整数值，指示结束选取元素的位置。如果是负数，则指示从集合末端开始的偏移量。如果省略，则选取范围会在集合末端结束。

参数

描述

selector

基于 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) 的之间的范围中的唯一项目。

zuoanlove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录