ループ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を持つ2番目の要素を取得することはできません。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：代わりにidの要素のグループのためのclass使用する一般的。非表示の入力フィールドには type="hidden"を使用できますが。

HTML：

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

のjQuery：

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