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