如果我们已经通过jQuery方法选中了一组元素，那么如何基于这些已经选中的元素进行下一步的遍历呢？ 例如，我们通过 $(‘li:eq(1)’) 选中了以下代码中的第二个li元素。 代码如下: <ul> <li><a>link</a></li> <li><a>selected link</a></li> <li><a>link</a></li> <li><a>link</a></li> </ul> 基于这个选中的元素，我们可以进一步遍历其他元素 下一个元素 $(‘li:eq(1)’).next() 前一个元素 $(‘li
在jQuery中，一旦我们通过选择器选中了一个或一组元素，常常需要对这些元素的相邻、父级或者子级元素进行进一步的操作。这涉及到jQuery提供的遍历方法，它们可以帮助我们高效地导航DOM结构。让我们详细了解一下基于当前元素进行下一步遍历的jQuery方法。
假设我们使用`$(‘li:eq(1)’)`选中了HTML列表中的第二个`<li>`元素。这是一个具有索引选择器的jQuery表达式，`eq()`函数在这里用于选取索引为1的元素（注意，jQuery的索引是从0开始的，所以`eq(1)`代表第二个元素）。
1. **下一个元素**: 使用`.next()`方法可以获取当前选中元素的下一个同级元素。在这个例子中，`$(‘li:eq(1)’).next()`将返回`<li><a href="#">link</a></li>`。
2. **前一个元素**: 若要获取前一个元素，我们可以使用`.prev()`方法。因此，`$(‘li:eq(1)’).prev()`将返回`<li><a href="#">link</a></li>`。
3. **父元素**: 如果需要访问当前元素的直接父元素，可以使用`.parent()`。对于`$(‘li:eq(1)’).parent()`，结果将是包含这些`<li>`的`<ul>`元素。
4. **所有兄弟元素**: `.siblings()`方法可以获取与当前元素同级的所有元素，不包括自己。然而，`$(‘li:eq(1)’).parent().children()`同样能实现这一效果，因为它会返回父元素的所有子元素，包括当前选中的`<li>`。
5. **所有后续兄弟元素**: 若要获取所有位于当前元素之后的同级元素，可以使用`.nextAll()`。`$(‘li:eq(1)’).nextAll()`将返回剩余的`<li>`元素。
6. **所有前续兄弟元素**: 类似地，`.prevAll()`方法可以获取所有位于当前元素之前的同级元素。`$(‘li:eq(1)’).prevAll()`将返回第一个`<li>`元素。
7. **使用参数**: 上述方法还可以接受一个选择器作为参数，以过滤返回的结果。例如，`$(‘li:eq(1)’).parent().children(‘:last’)`将返回父元素`<ul>`的最后一个子元素，即`<li><a href="#">link</a></li>`。
在遍历过程中，如果需要恢复到之前选中的元素集合，可以使用`.end()`方法。它取消了所有最近的遍历操作，将焦点重新置于调用`.end()`方法前的元素集上。
jQuery的遍历方法提供了一种灵活的方式，帮助开发者在DOM树中穿梭，对相关元素进行操作。熟练掌握这些方法，可以极大地提高在JavaScript中处理DOM操作的效率和便利性。
