在操作网页 DOM 的时候，我们经常需要精准地选中某个元素旁边的“邻居”。jQuery 提供了一系列非常顺手的遍历方法，其中 next() 是我个人很喜欢的一个，因为它直接、简单，几乎不会出错。它的核心作用就是：获取每个匹配元素紧随其后的那个兄弟元素。

如果一个元素后面紧跟着换行或者文本节点（在浏览器看来它们也是节点），next() 方自动忽略它们，直接找到下一个元素节点。这点在项目中非常省心，不用我们再去额外处理那些烦人的空白节点。

核心语法

$(selector).next([filter])

这个语法里，filter 参数是可选的。它让我们可以进一步指定一个选择器，来筛选那个紧随其后的兄弟元素。如果紧跟着的兄弟不满足 filter 条件，方法就什么也不返回，不会继续向后找。

本节课程知识要点

• next() 只关心紧挨着的下一个兄弟元素，不会获取后面的所有兄弟。

• 它只向前查找，不会回头找之前的元素。

• 默认情况下，它只认元素节点，文本、注释节点都会被跳过，这一点非常人性化。

• 加上 filter 参数，可以把它变成一个“条件判断器”：只有在下一个兄弟符合条件时才生效。

跟着例子动手试试

光看理论总觉得差点意思，我们直接上几个代码示例，跑一遍就全明白了。

示例一：基础用法，不做任何筛选

假设我们有这么一个简单的 HTML 结构：一个容器 <div> 里，有列表 <ul>、标题 <h2> 和段落 <p>。

<div id="container">
  <ul>这是个列表</ul>
  <h2>我是二级标题</h2>
  <p>我是一段文本。</p>
</div>
<button>高亮下一个兄弟</button>

现在，我想在点击按钮的时候，把 <h2> 后面紧挨着的那个元素的样式改一改。这是 next() 最朴素的用法。

$("button").click(function(){
  $("h2").next().css({
    "font-size": "28px",
    "color": "darkblue",
    "border": "2px solid orange"
  });
});

这套代码执行后，点击按钮，<h2> 的下一个兄弟 <p> 元素的样式就会变化。如果我不加后面 .css() 链式调用，$("h2").next() 返回的就是那个 <p> 的 jQuery 对象。

我早期学习的时候，会习惯性地用 $("h2 + p") 这个相邻兄弟选择器，效果一样。但对比起来，.next() 方法的写法在程序逻辑流里更连贯，尤其是在链式操作或条件判断里，读起来更自然。

示例二：加上过滤器，精准定位

上一个例子中，只要 h2 后面有兄弟，不管是什么标签，都会被选中。如果我们只想在它下一个兄弟恰好是 <p> 元素的时候才进行操作，这个时候就要用到 filter 参数了。

看下面这段结构，有多个 h2，它们后面的兄弟也各不相同：

<div id="wrap">
  <h2>标题一</h2>
  <ul>列表内容</ul>
  <h2>标题二</h2>
  <p>段落内容</p>
  <h2>标题三</h2>
  <span>行内文本</span>
</div>
<button>只高亮紧挨着的p元素</button>

我们希望只把紧跟 h2 后面的那个 <p> 元素挑出来，其余兄弟一概不管。代码就这么写：

$("button").click(function(){
  $("h2").next("p").css({
    "color": "blue",
    "border": "3px dashed green"
  });
});

执行结果：只有“标题二”下面的那个 <p>段落内容</p> 会被加上样式。“标题一”后面是 <ul>，不匹配；“标题三”后面是 <span>，也不匹配。next("p") 就像一个安检门，不是 p 元素根本就不让过。我认为，这比先用 next() 再 .is("p") 去判断要优雅得多。

示例三：连续点击，逐个遍历

next() 方法还有一个很实用的场景，就是结合一个变量，实现点击按钮依次选中下一个元素的效果，就像走台阶一样。

我们安排一排 div 方块，打算实现一个效果：每次点击按钮，高亮的方块就向后移动一格。

<style>
  .box {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 5px;
    border: 2px solid #333;
  }
</style>

<div class="box" id="start">起点</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<button>移动到下一个</button>

JavaScript 逻辑可以这样组织：

$(function(){
  // 设定起点
  var current = $("#start");
  current.css("background-color", "coral");

  $("button").click(function(){
    // 找到当前元素的下一个兄弟
    current = current.next();
    // 清除所有方块的高亮
    $(".box").css("background-color", "");
    // 如果下一个兄弟存在（不是空对象），就高亮它
    if(current.length) {
      current.css("background-color", "coral");
    }
  });
});

这个例子很好地体现了 next() 在交互中的应用潜力。每次点击，变量 current 都会更新为自己现在的下一个兄弟。到了之后一个 div 后面没东西了，current.next() 返回空，current.length 为零，就不会再执行高亮，整个过程平稳结束，不会报错。