중첩 된 요소에 대한 Jquery

Question

다음과 같이 DIV 구조를 가지고 있습니다 (pls는 image을 확인하십시오). Jquery를 사용하여 상대 버튼을 클릭하면 텍스트 상자의 내용을 변경하고 싶습니다.

예 I 버튼을 클릭하면 (1) 다음의 내용 입력란 (1)으로 변경한다. 마찬가지로 단추 (2)를 클릭하면 텍스트 상자 (2)의 내용이 변경됩니다.

다음 코드를 작성했지만 버튼 (2)에서 작동합니다. 버튼 (1)을 클릭하면 두 텍스트 상자의 내용이 변경됩니다.

 $(document).on('click', '.b', function(e) { 
     var a = $(this).closest('.a'); 
     $('.c', a).val("sample text"); 
    }); 

다른 버튼/텍스트 상자에 대해 서로 다른 클래스를 사용하면이 문제를 해결할 수 있습니다. 그러나 나는 같은 계급 구조를 가지고 문제를 해결하기를 원했습니다.

Answer 1

DOM 구조가 이미지와 항상 동일하면이 방법이 효과적입니다.

HTML :

<div class="a"> 
    <input type="text" class="c"> 
    <input type="button" value="Button" class="b"> 
    <div class="a"> 
     <input type="text" class="c"> 
     <input type="button" value="Button" class="b"> 
    </div> 
</div> 

jQuery를 : 당신이 가장 가까운 ".a" 요소까지 통과 한 다음 찾기를 수행하기 때문에 그런 식으로 작동

$('.b').on('click', function() { 
    //Find parent .a 
    var $a = $(this).parent(); 

    //Add in the text 
    $a.children(".c").val("sample text"); 
}); 

WORKING EXAMPLE

Answer 2

, 원래 재귀 적이다. 이것이 두 텍스트 상자를 모두 선택하는 이유입니다.

대신, 바로 형제 요소를 찾을 수 대신 당신의 사업부 구조의 이미지의

$(document).on('click', '.b', function(e) { 
    var $c = $(this).siblings('.c'); 
    $c.val("sample text"); 
});