我如何才能只与 jQuery 中的兄弟姐妹一起工作？

Question

我怎样才能做到这一点，假设我在 html 中动态创建了这个清单。我想要的是，如果我使用 .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，但想法是一样的。只要您的按钮和要添加复选框的位置在某处共享父级，这种方法就有效。如果他们不共享父级（或与所有其他复选框共享），请尝试其他方式遍历 DOM - 兄弟姐妹、$().nearest() 等

我如何才能只与 jQuery 中的兄弟姐妹一起工作？

How can I work only with siblings in jQuery?

jquery

frontend