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

简介:

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

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

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

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

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

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

//根据索引选择screenshot集合中的第2个元素,索引从0开始

jQuery('li:eq(1)');

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

让我们来看看,使用几个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>

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

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

元素。别忘了,这个例子仅仅用来说明遍历方法如何传递用于选择特定元素的表达式:
jQuery('li:eq(1)').parent().children(':last') //选择最后一个 <li>

jQuery还提供了其他遍历方法,在这里不作介绍。在本书里你将会看到这些遍历方法。

相关文章
|
JavaScript 索引
《jQuery Cookbook中文版》——1.9 根据当前上下文遍历DOM获得新的DOM元素集
处理遍历方法时需要牢记的第二个概念是许多方法都接受一个可选的参数,用于过滤选择集。我们仍然用链接的示例来说明这一点,看看如何修改代码,以便只选择最后一个<li>元素。
1090 0
|
6月前
|
XML JavaScript 前端开发
jQuery 的 DOM 操作
jQuery 的 DOM 操作
45 0
|
6月前
|
JavaScript 前端开发
jQuery 的 DOM 操作- 中
jQuery 的 DOM 操作- 中
27 0
|
6月前
|
JavaScript
jQuery 的 DOM 操作-上
jQuery 的 DOM 操作-上
39 0
|
JavaScript 前端开发
jQuery基本功能之DOM操作
jQuery基本功能之DOM操作
64 0
jQuery基本功能之DOM操作
|
JavaScript 前端开发 索引
jQuery中的DOM操作
每个HTML元素都可以转换为一个DOM对象,而每个DOM对象都有一组属性,通过这些属性可以设置HTML元素的外观和特性。在标准 JavaScript 中,可以使用document.getElementsById (“对象ID”)方法获取对应的DOM对象。在jQuery中,可以通过选择器选中多个HTML元素,再使用get()方法获取其中某个HTML元素对应的对象
jQuery中的DOM操作
|
JavaScript 前端开发 程序员
【JQuery框架】超详细DOM操作看这一篇就够了!
【JQuery框架】超详细DOM操作看这一篇就够了!
237 0
【JQuery框架】超详细DOM操作看这一篇就够了!
|
JavaScript
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
258 0
jQuery 中使用 DOM 操作节点,对页面中的表格实现增、删、查、改操作
|
JavaScript
js_jQuery【下拉菜单联动dom操作】
js_jQuery【下拉菜单联动dom操作】
95 0
js_jQuery【下拉菜单联动dom操作】