how I can find with jQuery the next element?

Question

how I can find the next class "comment" and shows it after I click "read" ?

<div class="preview">
<div class="messages">
    <div class="msg">
        <div class="circle left"><img src=""></div>
        <div class="name">Lars Mehrhoff</div>
        <div class="sep_20"></div>
        <a href="#" class="read"><i class="icon-comment"></i></a>
        <a href="#" class="reply"><i class="icon-reply"></i></a>
        <a href="#" class="read"><i class="icon-ok"></i></a>
        <a href="#" class="trash"><i class="icon-trash"></i></a>
        <div class="comment">ASD</div>
    </div>

    <div class="clearfix"></div>

    <div class="msg">
        <div class="circle left"><img src=""></div>
        <div class="name">Lars Mehrhoff</div>
        <div class="sep_20"></div>
        <a href="#" class="read"><i class="icon-comment"></i></a>
        <a href="#" class="reply"><i class="icon-reply"></i></a>
        <a href="#" class="read"><i class="icon-ok"></i></a>
        <a href="#" class="trash"><i class="icon-trash"></i></a>
        <div class="comment">ASD</div>
    </div>
</div>

And my jQuery Code is this:

    $('.read').click(function(e) {
    $(this).find('.comment').show();
});

$('.comment').hide();

I would display only the comment that is next to the "read"

Answer 1

You can use the .siblings() method:

$(this).siblings(".comment").show();