jQuery | next() 和 nextAll() 示例

next() 方法返回匹配元素集合中紧邻每个元素后面的兄弟元素。而 nextAll() 方法则返回匹配元素集合中每个元素之后所有的兄弟元素。

next()

语法： $(selector).next(filter)

示例代码：

HTML 代码：

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li class="current">列表项 3</li>
  <li>列表项 4</li>
  <li>列表项 5</li>
</ul>

jQuery 代码：

$(document).ready(function(){
  $("li.current").next().css("color", "red");
});

说明：

以上代码将选中当前列表项的下一个兄弟元素并将其文本颜色设置为红色。

nextAll()

语法： $(selector).nextAll(filter)

示例代码：

HTML 代码：

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li class="current">列表项 3</li>
  <li>列表项 4</li>
  <li>列表项 5</li>
</ul>

jQuery 代码：

$(document).ready(function(){
  $("li.current").nextAll().css("color", "red");
});

说明：

以上代码将选中当前列表项之后的所有兄弟元素并将其文本颜色设置为红色。

注意：

1. next() 和 nextAll() 方法只会匹配元素集合中每个元素之后的兄弟元素，如果需要匹配所有后面的元素，则可以使用 nextUntil() 方法。

2. 可以传入一个过滤器参数来筛选匹配元素集合中下一个或下面所有的兄弟元素。