Question

我的代码示例：

<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..?
}

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

Answer 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();

Answer 2

您可以使用此

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

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

Answer 3

您可以使用：

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

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

编辑：在审核了其他答案后，我认为$(event.delegateTarget).next();是Felix Kling首次提出的，是最有效的查询。

Answer 4

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

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

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

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

或使用click事件回调提供的delegateTarget：

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

jQuery遍历同一级别

4 个答案: