jQuery에서 클래스 내부 요소를 선택하는 방법은 무엇입니까?

Question

정보를 동적으로 채우는 루프가 있습니다.

<div class="main"> 

<div class="more"> 
    more 
</div> 
<span></span> 
    .... 
<div class="more"> 
    more 
</div> 
<span></span> 

</div> 

클릭하면 특정 div가 표시됩니다. "ajax"를 호출합니다. 성공하면 해당 div의 내용과 다음 내용을 일부 내용으로 대체하려고합니다.

$(document).on("click", ".more", function (event) { 
      $.ajax({ 
       url: '..', 
       datatype: 'application/json', 
       success: function (data) { 
        $(".more",this).html("Update Dev"); //update div 
        $(".more",this).find('span:first').text("Update Span"); //update span 
       }, 
       error: function() { alert('something bad happened'); } 
      }); 
     }); 

클릭 한 요소에 어떻게 액세스합니까?

감사

Answer 1

당신은 클릭 버튼을 얻을 클릭 핸들러 내부 $(this)를 사용할 수 있습니다. AJAX 콜백이 아닌 클릭 핸들러에서 캡쳐해야합니다.

$(document).on("click", ".more", function (event) { 
    var clickedDiv = $(this); // <- capture clicked div to variable 

    $.ajax({ 
     url: '..', 
     datatype: 'application/json', 
     success: function (data) { 
      // use captured div to set the contents 
      clickedDiv.html("Update Dev"); 
      // use captured div and function next() to get the span element 
      clickedDiv.next('span').html("Updated span"); // then update span 
     }, 
     error: function() { alert('something bad happened'); } 
    }); 
});