jqueryによって複数の要素を持つクラスを共有する特定の要素を見つけよう

Question

私のウェブサイトで「好き」の機能のAJAXを実装しようとしています。私はcreate.js.hamlファイルの次のコードを持っている：

$(".postlike_unlike").html("#{escape_javascript(render('unlike'))}"); 

それらはすべて同じクラスを共有するので、私のビューページは、すべての記事をループ。ここでは、ビューページの抜粋です：

- @post.each do |post| 
    ... 
    %ul.dropdown-menu 
    %li 
     ...  
    %li 
     .postlike_unlike 
     .form_for 
      ... 

レンダリングされたHTML：

<div class='post content'> 
    <p>post 1</p> 
</div> 
<div class='btn-group dropup'> 
    <a class='btn btn-primary' href='/post/3/view?view=true' method='get'> 
    <i class='icon-info-sign icon-large'></i> 
    View Detailed Post 1 
    </a> 
    <a class='btn btn-primary dropdown-toggle' data-toggle='dropdown'> 
    <span class='caret'></span> 
    </a> 
    <ul class='dropdown-menu'> 
    <li> 
     <div class='postlike_unlike'> 
     <form accept-charset="UTF-8" action="/likes" class="new_like" data-remote="true" id="new_like" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="McQDJsBJF6UHTeMGQNDTBCRzF/PmP5JWWuACqv1ONCA=" /></div> 
      <input id="like_likee_id" name="like[likee_id]" type="hidden" value="3" /> 
      <a href='javascript:void(0)' onclick="$(this).closest('form').submit()"> 
      <i class='icon-heart-empty icon-large'></i> 
      Like this Post 
      </a> 
     </form> 
     </div> 
    </li> 
    <li class='divider'></li> 
    </ul> 
</div> 

<div class='post content'> 
    <p>post 2</p> 
</div> 
<div class='btn-group dropup'> 
    <a class='btn btn-primary' href='/post/3/view?view=true' method='get'> 
    <i class='icon-info-sign icon-large'></i> 
    View Detailed Post 2 
    </a> 
    <a class='btn btn-primary dropdown-toggle' data-toggle='dropdown'> 
    <span class='caret'></span> 
    </a> 
    <ul class='dropdown-menu'> 
    <li> 
     <div class='postlike_unlike'> 
     <form accept-charset="UTF-8" action="/likes" class="new_like" data-remote="true" id="new_like" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="McQDJsBJF6UHTeMGQNDTBCRzF/PmP5JWWuACqv1ONCA=" /></div> 
      <input id="like_likee_id" name="like[likee_id]" type="hidden" value="3" /> 
      <a href='javascript:void(0)' onclick="$(this).closest('form').submit()"> 
      <i class='icon-heart-empty icon-large'></i> 
      Like this Post 
      </a> 
     </form> 
     </div> 
    </li> 
    <li class='divider'></li> 
    </ul> 
</div> 

私はに実行している問題：私はボタン「のように」をクリックすると、それはレンダリング違うスタイルで投稿ごとに。私は、すべての投稿に 'postlike_unlike'クラス（ループ）があることを認識していますが、関連する投稿のクラスのみを変更する方法があるかどうかを知りたかったので、好きな投稿の「好き」を更新します。

私はjQueryに関しては初心者ですので、私が達成しようとしていることを行う簡単な方法があれば私はよく分かりません。ご不明な点がございましたら、お気軽にお問い合わせください。

ご協力いただきありがとうございます。

Answer 1

、（thisキーワードによって参照）、クリックしたものを見つけるでしょう、それをクリックしてそれぞれに以下の

$('.postlike_unlike').click(function(){ 
    //edit the html 
    $(this).html("#{escape_javascript(render('unlike'))}"); 
}) 

のような何かを行うことができます、あなたはとは異なり、/それぞれのようにクリックハンドラを装着していると仮定あなたのHTMLを適用します。

Answer 2

または$(this).parent()か何か

Answer 3

それはループだので、私は使用してから、それぞれにユニークなのdivコンテナ作ることにしました：今私のjsファイルで、私は次を参照し

%div{:class => "postlike_unlike#{@post.id}} 

を：

この方法では、適切な投稿の「好き」ボタンを変更するだけです。

ご協力いただきありがとうございます。