Jqueryは個々の要素のhtml（）を追加します

Question

投票ボタンをクリックするたびにajax-loader gifをロードしています。ただし、画像はすべての項目に表示されます。私は投票したアイテムのイメージをロードする方法を見つけようとしています。これは私のコードです。

$(document).ready(function(){ 
    $(".vote").click(function(e) { 
     $('.ajax_load').html('<img src="/images/ajax-loader.gif" />'); 
     var item_id = $(this).attr("id"); 
     var dataString = 'item_id=' + item_id; 

    $.ajax({ 
     type: "POST", 
     url: "vote.php", 
     data: dataString, 
     cache: false, 
     success: function(html) { 
    $('.ajax_load').html('Voted!'); 
     } 
    }); 
    return false; 
}); 
}); 

HTMLサンプル

<div class="vote" id=88">Vote</div> <div class="ajax_load"> 
<div class="vote" id=92">Vote</div> <div class="ajax_load"> 
<div class="vote" id=38">Vote</div> <div class="ajax_load"> 

Answer 1

が、それはあなたが使用する必要がありますので、要素が兄弟であるように見える

$(this).nextAll('.ajax_load:first').html('<img src="/images/ajax-loader.gif" />'); 

画像を表示する。成功コールバックで

特定のターゲットに

$('#' + item_id).nextAll('.ajax_load:first').html('Voted!'); 

を使用するには、要素を投票しました。

Answer 2

.ajax_loadは投票の子であると仮定すると、

$("vote").click(function(e) { 
    $(this).html(...); 

Answer 3

を試みるが、あなたはこれを変更することができます

$('.ajax_load').html('<img src="/images/ajax-loader.gif" />'); 

へ：

$(this).find('.ajax_load').html('<img src="/images/ajax-loader.gif" />'); 

これは、クリックされた投票の子であり、すべてではなく、その子のみである.ajax_loadに影響します。

あなたのajax呼び出しと同じことです。私は$(this)がまだクリックされた "投票"を参照するべきだと信じています。

$('.ajax_load').html('Voted!'); 

が

$(this).find('.ajax_load').html('Voted!'); 

編集オーケー...となり、そのHTML与えられ、これを行うにはいくつかの方法があります。私はおそらくそれをこのように行うだろう：あなたはjQueryのを使用してdiv要素を選択する方法を理解しようとしている場合、一般的に

$(this).next('.ajax_load:first')... <- do whatever you'll do with the selection. 

を見るには絶好の場所にはtraversingとselectingのためのjQueryのドキュメントです。

Answer 4

クラスajax_loadを持ついくつかの要素があるとします。一意に識別する必要があります。これらの質問に説明を見てみましょう：

• How to show a hidden div on mouse over on a series of images
• jquery individual mouseenter for elements HTMLサンプルから