付随する div コンテンツを含む一連の [続きを読む] ボタンがありますが、残念ながらこれらの続きを読むとコンテンツ div を一緒にラップすることはできないため、[続きを読む] リンクがクリックされたときに正しいコンテンツを表示する最善の方法は何か疑問に思っていました。 .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>