如何显示第一个匹配的选择器上点击时，可能有多个相同的选择器

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