javascript - How to show just the first matched selector on click when there may be multiple identical selectors

Question

I have a series of read more buttons with accompanying div content, unfortunately these read more and content divs cant be wrapped together so I was wondering what is the best way to display the correct content when a read more link is clicked, I've tried .closest and .next with no success.

Fiddle: 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();

见工作小提琴