jQuery的穿越在同一水平上

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

如何完成穿越正确选择下面的.report的ul.report-moreinfo我目前选择了？

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'); 

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

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