jQueryで兄弟としか動作させるにはどうすればいいですか？

Question

これをどのように実現できますか、htlmでこのチェックリストを動的に作成したとしましょう。私が望むのは、.append（）を使って全く同じチェックリストを作成し、ボタンの追加項目を押すと、そのボタンだけがクリックされます。

<div class="checkbox"> 
    <input id="check1" type="checkbox" name="check" /> 
    <label for="check1"><span class="chk-text">Checklist One<span></label> 
    <br> 
    <input id="check2" type="checkbox" name="check" checked> 
    <label for="check2"><span class="chk-text">Checklist two<span></label> 
    <br> 
    <input id="check3" type="checkbox" name="check"> 
    <label for="check3"><span class="chk-text">Checklist three<span></label> 
    </div> <!-- END OF CHECKBOX --> 
    <button class="add-item" type="button">Add</button> 
</div> <!-- END OF ADD-ITEM --> 

<div class="checkbox"> 
    <input id="check1" type="checkbox" name="check" /> 
    <label for="check1"><span class="chk-text">Checklist One<span></label> 
    <br> 
    <input id="check2" type="checkbox" name="check" checked> 
    <label for="check2"><span class="chk-text">Checklist two<span></label> 
    <br> 
    <input id="check3" type="checkbox" name="check"> 
    <label for="check3"><span class="chk-text">Checklist three<span></label> 
    </div> <!-- END OF CHECKBOX --> 
    <button class="add-item" type="button">Add</button> 
</div> <!-- END OF ADD-ITEM --> 

のjQuery：

$('body').on('click', '.add-item', function(){ 
    $('.checkbox').append('<br><input id="check' + idCounter + '" type="checkbox" name="check"><label for="check' + idCounter + '"><span class="chk-name">' + name + '</span></label>'); 
    }); 

私は、私は両方でない選択のdivに新しいチェックリストを追加するにはどうすればよいです。

Answer 1

add-itemボタンを使用すると、チェックボックスをに行きたい、同じ親コンテナ内にある場合、あなたはこのようにそれらをターゲットにすることができます：

$('body').on('click', '.add-item', function(){ 
    $(this).parent().append('<br><input id="check' + idCounter + '" type="checkbox" name="check"><label for="check' + idCounter + '"><span class="chk-name">' + name + '</span></label>'); 

}）;

実際には、あなたのHTMLは無効ですか？ 'add-item'の終了タグはありますが、一致する開始タグはありません。だからあなたの構造は、私が思ったものとは異なるかもしれません。その場合はparentの2つのレベルを上げる必要があるかもしれませんが、その考え方は同じです。チェックボックスを追加したいボタンと場所が親をどこかで共有している限り、このアプローチが有効です。親を共有していない（または他のすべてのチェックボックスと共有していない）場合は、DOM - 兄弟、$().nearest()などを横断する他の方法を試してみてください。