Вопрос:

Как я могу работать только с братьями и сестрами в jQuery?

jquery frontend

27 просмотра

1 ответ

17 Репутация автора

Как я могу сделать это, скажем, у меня есть этот контрольный список, динамически создаваемый в htlm. Что мне нужно, так это если я создам точно такой же контрольный список с помощью .append () и нажму кнопку 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 -->

<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, который я выбрал не в обоих.

Автор: Arminas Bekampis Источник Размещён: 22.08.2016 08:38

Ответы (1)


0 плюса

2586 Репутация автора

Решение

Если 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()и т. Д.

Автор: jack Размещён: 23.08.2016 01:51
Вопросы из категории :
32x32