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에만 영향을 주며 그 중 일부는 적용되지 않습니다.

아약스 호출과 똑같습니다. 나는 $(this)가 여전히 클릭 된 "투표"를 참조해야한다고 생각합니다.

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

이

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

편집 좋아 ...이되다, 그 HTML 주어,이 작업을 수행하는 몇 가지 방법이있다. 나는 아마 이런 식으로 할 것이다 : 당신이 jQuery를 사용하여 사업부를 선택하는 방법을 알아 내려고 노력하는 경우, 일반적으로

$(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로 샘플에서