Loop каждый элемент нажмите событие в 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 использовать 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); 
}); 

---

FYI: здравый class для группы элементов вместо id. Хотя вы можете использовать type="hidden" для скрытых полей ввода.

HTML:

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

JQuery:

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