《jQuery Cookbook中文版》——1.9 根据当前上下文遍历DOM获得新的DOM元素集

简介: 处理遍历方法时需要牢记的第二个概念是许多方法都接受一个可选的参数,用于过滤选择集。我们仍然用链接的示例来说明这一点,看看如何修改代码,以便只选择最后一个<li>元素。

本节书摘来自异步社区《jQuery Cookbook中文版》一书中的第1章,第1.9节,作者:【美】jQuery社区专家组著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.9 根据当前上下文遍历DOM获得新的DOM元素集

1.9.1 问题
你已经选择了一组DOM元素,根据选择集在DOM结构树中的位置,你打算遍历DOM获得一个新的元素集以供操作。

1.9.2 解决方案
jQuery提供一组方法,可以根据当前选择的DOM元素的上下文遍历DOM。

例如,查看如下的HTML片段:

<div>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>

现在,用:eq()索引自定义选择器选择第2个< li>元素:

//根据索引选择<li>集合中的第2个元素,索引从0开始
jQuery('li:eq(1)');

现在有一个上下文——HTML结构中的一个出发点。出发点是第2个< li>元素。从这里开始,可以到达任何位置——对,几乎任何位置。

让我们来看看,使用几个jQuery提供的DOM遍历方法能够到达哪里。代码中的注释就能说明问题:

jQuery('li:eq(1)').next() //选择第三个<li>
jQuery('li:eq(1)').prev() //选择第一个<li>
jQuery('li:eq(1)').parent() //选择<ul>
jQuery('li:eq(1)').parent().children() //选择所有<li>
jQuery('li:eq(1)').nextAll() //选择第二个<li>之后的所有<li>
jQuery('li:eq(1)').prevAll() //选择第二个<li>之前的所有<li>

记住,这些遍历方法产生新的包装器集,使用end()可以返回前一个包装器集。

1.9.3 讨论
目前为止介绍的遍历方法展示了简单遍历。要了解遍历,还必须知道另外两个重要的概念。

第一个概念可能显而易见——遍历方法可以链接。我们再来看看前面出现过的jQuery语句:

jQuery('li:eq(1)').parent().children() //选择所有<li>
注意,我已经从第二个< li>元素遍历到父元素< ui>,然后再从父元素选择< ui>的所有子元素。jQuery包装器集现在包含的是< ui>中的所有< li>元素。当然,这只是为了说明遍历方法而设计的例子。如果我们想要的是一个只有< li>元素的包装器集,从一开始就选择所有< li>元素要简单得多(例如,jQuery('li'))。

处理遍历方法时需要牢记的第二个概念是许多方法都接受一个可选的参数,用于过滤选择集。我们仍然用链接的示例来说明这一点,看看如何修改代码,以便只选择最后一个< li>元素。别忘了,这个例子仅仅用来说明遍历方法如何传递用于选择特定元素的表达式:

jQuery('li:eq(1)').parent().children(':last') //选择最后一个 <li>

相关文章
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文讲述了如何遍历XML文档的节点树。通过示例代码展示如何循环访问XML元素,提取每个节点的名称和值。实例中,XML数据包含书籍信息,程序加载XML后,遍历根节点的所有子节点,依次显示它们的名称和内容。
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
Traversal means looping or moving through a node tree in XML DOM. &quot;Traversal of the node tree&quot; often occurs when extracting each element&#39;s value from an XML document. Here&#39;s an example that loops through all child nodes of an `xmlDoc` and displays their names and values:
|
4天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到xmlDoc,然后遍历根元素的所有子节点,打印出节点名及文本值。在浏览器中运行此实例会显示标题、作者和年份等信息。
|
7天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,遍历根元素的所有子节点,打印出节点名及文本值,如&quot;title: Everyday Italian&quot;等。
|
12天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了XML DOM遍历节点树的概念,通过循环或移动在节点树中操作。示例展示了如何遍历XML文档,提取每个元素的名称和值。代码实例遍历了一个XML结构,输出了`book`元素的子节点信息,如`title`, `author`, `year`及其对应的值。
|
13天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,然后遍历根元素的所有子节点,打印出节点名及文本值。在输出中,可以看到对&quot;title&quot;, &quot;author&quot;和&quot;year&quot;节点的处理。
|
15天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了XML DOM遍历节点树的概念,通过循环移动遍历文档,以提取各元素值。示例代码展示了如何加载XML到xmlDoc,获取根元素子节点并打印其名称和值,例如:`title: Everyday Italian`, `author: Giada De Laurentiis`, `year: 2005`。
|
19天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了XML文档对象模型(DOM)中的节点遍历。通过遍历节点树,可以循环访问XML文档的各个元素。示例代码展示如何遍历一个XML结构,打印出所有子节点的名称和值。在HTML中,XML字符串被加载到`xmlDoc`,然后获取根元素的子节点并逐一输出其信息。
|
1天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
Traversal means looping or moving through a node tree in XML DOM.
|
27天前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
14 2