jQuery 如何获取下一个子标签

在前端开发中，使用 jQuery 操作 DOM 元素是一项常见任务。获取下一个子标签就是其中一个典型需求，它能帮助我们实现许多交互效果，比如展开/收起相邻内容等。下面就来详细探讨一下 jQuery 如何获取下一个子标签。

使用 next() 方法

在 jQuery 里，next() 方法是获取下一个兄弟元素（紧挨着的下一个子标签）的常用方式。语法非常简单：$(selector).next()。例如，HTML 结构如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

若想获取第一个列表项的下一个兄弟元素，可以这样写：

$(document).ready(function() {
  var nextItem = $('li:first').next();
  console.log(nextItem.text());
});

这段代码中，$('li:first') 选中了第一个列表项，然后通过 next() 方法获取到它的下一个兄弟元素，并将其文本内容打印到控制台。

限定选择器

有时候，我们可能只想获取符合特定条件的下一个兄弟元素。这时可以给 next() 方法传入一个选择器参数。比如：

<ul>
  <li class="item">列表项1</li>
  <li>普通列表项</li>
  <li class="item">列表项3</li>
</ul>

如果我们只想获取第一个 class 为 item 的列表项下一个同样 class 为 item 的兄弟元素，代码如下：

$(document).ready(function() {
  var nextMatchedItem = $('.item:first').next('.item');
  console.log(nextMatchedItem.text());
});

这样就能精准定位到符合条件的下一个子标签。

使用 nextAll() 方法

nextAll() 方法与 next() 略有不同，它会获取当前元素之后的所有兄弟元素，而不只是紧邻的下一个。语法为 $(selector).nextAll()，如果需要筛选，也可以传入选择器参数。例如：

<div class="parent">
  <div class="child">子元素1</div>
  <div>普通子元素</div>
  <div class="child">子元素3</div>
  <div class="child">子元素4</div>
</div>

若想获取第一个 class 为 child 的元素之后的所有 class 为 child 的兄弟元素：

$(document).ready(function() {
  var nextAllMatched = $('.child:first').nextAll('.child');
  nextAllMatched.each(function() {
    console.log($(this).text());
  });
});

通过 nextAll() 方法和 each() 遍历，就能处理后续所有符合条件的子标签。

掌握这些 jQuery 获取下一个子标签的方法，能让我们在 DOM 操作中更加得心应手，为网页增添丰富的交互功能。