《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月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
20 0
|
1月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
12 0
|
1月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
17 0
|
1月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
16 0
|
1月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
20 0
|
2月前
|
JavaScript 前端开发
jQuery 第八章(jQuery操作dom元素)
jQuery 第八章(jQuery操作dom元素)
49 0
|
2月前
|
JavaScript 前端开发
jQquery 第七章(jQuery操作dom元素)
jQquery 第七章(jQuery操作dom元素)
32 0
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
83 0
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
110 0
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
105 0

相关产品

  • 云迁移中心