jQuery中next与nextAll的区别详解

还在为 jQuery 中 `next()` 和 `nextAll()` 的区别而困惑吗？本文深入解析这两个 DOM 遍历方法，助你精准操控页面元素。`next()` 方法如同其名，只获取紧邻的下一个同级兄弟元素，例如 `$('.item-2').next()` 将返回 `item-3`。而 `nextAll()` 则更为强大，它会获取匹配元素之后的所有同级兄弟元素，例如 `$('.item-2').nextAll()` 将返回 `item-3` 和 `item-4`。文章通过实例代码详细展示了它们的用法，并提供了实际使用建议，让你在选择时更加得心应手，写出更高效的 jQuery 代码。掌握 `next()` 和 `nextAll()` 的差异，提升你的前端开发技能！

next只获取下一个同级兄弟元素，如$('.item-2').next()返回item-3；nextAll获取之后所有同级兄弟元素，如$('.item-2').nextAll()返回item-3和item-4。

next 和 nextAll 是 jQuery 中用于遍历 DOM 元素的两个方法，它们都用来获取匹配元素之后的同级元素，但作用范围和返回结果有明显区别。

next：只获取下一个同级元素

调用 next() 方法时，jQuery 会查找当前匹配元素的紧邻的下一个同级元素（即下一个兄弟节点），如果存在就返回一个包含该元素的 jQuery 对象，否则返回空对象。

这个方法不会继续向后查找更远的兄弟元素，仅限“下一个”。

假设 HTML 结构如下：

<ul>
  <li class="item-1">第一项</li>
  <li class="item-2">第二项</li>
  <li class="item-3">第三项</li>
  <li class="item-4">第四项</li>
</ul>

执行代码：

$('.item-2').next();

结果是获取到

$('.item-2').nextAll();

$('.item-2').nextAll('li:nth-child(odd)')