如何顯示第一個匹配的選擇器上點擊時，可能有多個相同的選擇器

Question

我有一系列閱讀更多的按鈕與相關的div內容，不幸的是這些閱讀更多和內容divs不能被包裹在一起，所以我想知道什麼是點擊閱讀更多鏈接時顯示正確內容的最佳方式，我試過.closest和.next沒有成功。

小提琴：http://jsfiddle.net/QJcFf/1/

JS

var readMore = $('.readmore'); 


readMore.on('click', function(e) { 

    e.preventDefault(); 

    var el = $(this); 
    console.log(el); 

    el.next('.more-ctn').show(); 
    console.log(el.closest('.more-ctn')); 

}); 

HTML

<div class="main-content"> 
    <p>lorem ipsum <a href="#" class="readmore">Read more</a></p> 

    <div class="more-ctn"> 
     <p>Content for first readmore</p> 
    </div> 

    <p>lorem ipsum <a href="#" class="readmore">Read more</a></p> 

    <div class="more-ctn"> 
     <p>Content for first readmore</p> 
    </div> 
</div> 

Answer 1

只需更換你的下面的代碼：

el.next('.more-ctn').show(); 

這一個：

el.parent().next('.more-ctn').show(); 

見working fiddle