jquery функция только для запуска на родительском элементе, по которому щелкнули

Question

У меня есть jquery функция, которая клонирует DIV и увеличивает ID, как это:

<div class="parent">
    <div class="row">
        <!-- stuff that needs to be cloned-->
    </div>
    <div class="row">
        <input type="button" class="cloneRow" />
    </div>
</div>

и просто jquery как:

var uniqueId = 1;
$(function() {
     $('.cloneRow').click(function() {
        ...
         uniqueId++;  
     });
});

Это прекрасно работает, если есть только 1 родительский div ... Если я хочу создать дополнительный раздел, в котором нужно клонировать своих детей, например:

<div class="parent">
    <div class="row">
        <!-- stuff that needs to be cloned-->
    </div>
    <div class="row">
        <input type="button" class="cloneRow" />
    </div>
</div>

<div class="parent">
    <div class="row">
        <!-- stuff that needs to be cloned-->
    </div>
    <div class="row">
        <input type="button" class="cloneRow" />
    </div>
</div>

<div class="parent">
    <div class="row">
        <!-- stuff that needs to be cloned-->
    </div>
    <div class="row">
        <input type="button" class="cloneRow" />
    </div>
</div>

все сходит с ума, каждый родительский элемент получает несколько клонированных детей ... Как я могу ограничить функцию щелчка так что он работает только в элементе, где находится кнопка нажатия?

Answer 1

Вы пропустили соответствующую часть JS, но из описания это звучит так, как будто вы добавляете все элементы .row вместо того, который связан с кнопкой, по которой вы нажали. Чтобы исправить это, вы можете использовать методы обхода DOM, такие как closest() и prev(), чтобы найти нужные элементы и добавить к ним. Попробуйте это:

jQuery($ => {
  $('.cloneRow').click(function() {
    var $buttonRow = $(this).closest('.row');
    $buttonRow.prev('.row').clone().insertBefore($buttonRow);
  });
});

.parent {
  border: 1px solid #C00;
  margin: 0 0 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
  <div class="row">Content</div>
  <div class="row">
    <button type="button" class="cloneRow">Clone</button>
  </div>
</div>

<div class="parent">
  <div class="row">Content</div>
  <div class="row">
    <button type="button" class="cloneRow">Clone</button>
  </div>
</div>

Также обратите внимание, что генерация дополнительных атрибутов id во время выполнения, как подразумевается в вашем коде, является анти-паттерном. Не делай этого. Лучше всего использовать общие классы вместе с обходом DOM для связи элементов друг с другом, как показано в примере выше.