《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>

相关文章
|
2月前
|
XML 存储 JavaScript
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
**XML DOM 遍历、操作和导航概述** - 遍历XML节点树用于提取信息,例如,通过JavaScript的DOM API循环`&lt;book&gt;`子节点显示名称和值。 - DOM解析器处理XML文本数据,包括解析字符数据(PCDATA)和识别CDATA段。 - 节点导航涉及`parentNode`、`childNodes`等属性,`get_nextSibling`等辅助函数避免空文本节点。 - `getElementsByTagName`、`getAttribute`和`nodeValue`用于检索元素、属性值和文本。
42 6
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
9天前
|
存储 JavaScript 数据可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
vue3+echarts应用——深度遍历html的dom结构并用树图进行可视化
33 1
N..
|
2月前
|
JavaScript 前端开发 容器
jQuery中的DOM操作
jQuery中的DOM操作
N..
14 1
|
2月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
10 0
|
2月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
11 0
|
JavaScript 前端开发
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
160 0
使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
|
JavaScript 开发者
jQuery_ 复制元素、DOM 插入到现有元素外|学习笔记
快速学习 jQuery_ 复制元素、DOM 插入到现有元素外
204 0
jQuery_ 复制元素、DOM 插入到现有元素外|学习笔记
|
JavaScript 前端开发 索引
jQuery学习笔记--效果,操作html元素,遍历DOM树
参考W3school: http://www.w3school.com.cn/jquery/jquery_hide_show.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
1646 0
|
JavaScript
jQuery将元素转为Dom
jquery将选择的元素转为Dom $('#video')[0] 如果元素多的话比如: //可以通过循环遍历元素 for(var x=0;x
702 0