jQuery同层遍历答案

【问题标题】：jQuery traversing on the same leveljQuery同层遍历
【发布时间】：2013-06-05 20:04:38
【问题描述】：

我的代码示例：

<section id="reports">

  <div class="report">
    <div class="report-expand">MORE</div> <!-- this one is clicked -->
  </div>
  <ul class="report-moreinfo"></ul> <!-- I want to select this one -->

  <div class="report">
    <div class="report-expand">MORE</div>
  </div>
  <ul class="report-moreinfo"></ul>
  <div class="report">
    <div class="report-expand">MORE</div>
  </div>
  <ul class="report-moreinfo"></ul>

</section>

这是我的 jQuery 的一部分：

$('.report').on('click', '.report-expand', function(e) {
  // $(this) === '.report-expand'
  $(this).closest('.report') // now what..?
}

如何完成遍历以正确选择我当前选择的.report 后面的ul.report-moreinfo？

【问题讨论】：

标签： jquery jquery-traversing

【解决方案1】：

$(this).closest('.report').next();

因为列表是下一个兄弟。如果你想获得前一个兄弟，你可以使用.prev。
更多信息：http://api.jquery.com/next/、http://api.jquery.com/prev/。

Here is a list of all traversal methods.

由于无论如何您将事件处理程序绑定到.report 元素，您也可以使用event.delegateTarget 而不是$(this).closest(...)：

$(event.delegateTarget).next();

【讨论】：

我最终使用了$(event.delegateTarget).next(); - 谢谢！我之前实际上曾尝试过$(this).closest().next();，但代码中前面有一个 .remove() ，它弄乱了行为，这让我觉得我做错了什么。

【解决方案2】：

你可以用这个

  $(this).parent().next()

$(this).parent() 会给report div

【讨论】：

【解决方案3】：

您可以使用.next([selector])功能。像这样的：

$(this).closest('.report').next('ul.report-moreinfo');

但由于 div.report 是 div.report-expand 的父级，您可以这样做：

$(this).parent().next('ul.report-moreinfo');

或者使用点击事件回调提供的delegateTarget：

$(e.delegateTarget).next('ul.report-moreinfo');

【讨论】：

【解决方案4】：

你可以使用：

$(this).parent().next();

出于性能原因，使用.parent() 优于使用.closest()，只要.report-expand 始终是.report 的直接子代。

编辑：在查看了其他答案后，我认为 Felix Kling 首先建议的 $(event.delegateTarget).next(); 是最有效的查询。

【讨论】：