루프 내가 가진 jQuery를

Question

의 각 요소에 클릭 이벤트 :

$('aside .del').click(function(){ 
    var element = $('aside .id').text(); 
    $('#id').val(element); 
    }); 

그래서 내가 요소의 HTML이 각각 활성화하려는;

$('aside:first-child .del').click(function(){ 
    var element = $('aside:first-child .id').text(); 
    $('#id:first-child').val(element); 
    }); 

계속; 내 HTML :

{{# each items }} 
<aside> 
<input type="checkbox" class="del" value=""/> 
ID: <div class="id">{{ this._id }}</div> 
</aside> 
{{/each}} 
</div> 

    <form action="/delete" method="post"> 
    <div class="input"> 
     {{# each items }} 
     <input style="display:none" type="text" id="id" name="id"> 
     {{/each}} 
    </div> 
    <button type="submit">DELETE</button> 
    </form> 

하지만 난 그것을 간단히 같은 하드 코딩 아니다 싶다. 도와 줘서 고맙다 .

Answer 1

클릭 이벤트 처리기 내에서 this을 사용하면 클릭 한 요소를 참조 할 수 있으므로 클릭 된 요소를 기반으로 .id 요소를 가져옵니다.

id 속성의 값은 고유해야합니다. 그렇지 않으면 id 대신 id 대신 class을 사용하거나 두 번째 요소를 name 속성으로 가져옵니다. 컬렉션에서 해당 입력 요소를 인덱스로 가져옵니다.

---

$('aside .del').click(function(){ // get the aside element where the clicked element exist // and cache it for later use var $aside = $(this).closest('aside'); // get element value within the aside var element = $aside.find('.id').text(); // get hidden input by index of aside and // update its value $('[name="id"]').eq($aside.index()).val(element); }); 

참고 : 대신 id의 요소 그룹에 대한 class를 사용하여 일반적인. 숨겨진 입력 필드에 type="hidden"을 사용할 수 있지만

HTML :

<input type="hidden" class="id" name="id"> 

jQuery를 :

$('.id').eq($aside.index()).val(element);