Question

我有下一个HTML结构：

<div class='form-row'>
    <div class='col-2'>
        Blah Blah
    </div>
    <div class='col-4'>
        <button type='button' class='add_row'>+</button>
    </div>
</div>

在add_row按钮上单击时，我需要在最接近按钮form-row div的旁边添加另一个form-row div，因此结果将是：

<div class='form-row'>
    <div class='col-2'>
        Blah Blah
    </div>
    <div class='col-4'>
        <button type='button' class='add_row'>+</button>
    </div>
</div>
<div class='form-row'>
    <div class='col-2'>
        Blah Blah
    </div>
    <div class='col-4'>
        <button type='button' class='add_row'>+</button>
    </div>
</div>

我尝试使用jQuery脚本：

$(document).on('click', '.add_row', function () {

    $(this).closest('.form-row').append("<div class='form-row'>div contents</div>");

 });

但是它会在按钮（<div class='col-4'>的直接父项之后追加。

要附加到具有指定类的最接近的div的正确jquery是什么？

Answer 1

您要向表单行而不是内容添加同级。为此，您可以使用insertAfter()或after()。

$(document.body).on('click', '.add_row', function (e) {
  $(e.target).closest('.form-row').after('<div class="form-row">Content</div>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='form-row'>
  <div class='col-2'>
    Blah Blah
  </div>
  <div class='col-4'>
    <button type='button' class='add_row'>+</button>
  </div>
</div>
<div class='form-row'>
  <div class='col-2'>
    Blah Blah
  </div>
  <div class='col-4'>
    <button type='button' class='add_row'>+</button>
  </div>
</div>

Answer 2

编辑：使用$(el).after()，就像@Taplar建议的那样。下面更新了代码

执行$(el).append(...)时，您将追加到$(el)中。您想要的是附加到$(el)（又名$(el).parent()）的父级上。

$(function() {
  $(document).on('click', '.add_row', function () {

  $(this).closest('.form-row').after("<div class='form-row'>div contents</div>");
 });
});

请注意，如果要复制.form-row，则需要先克隆它，然后再附加。

$(function() {
  $(document).on('click', '.add_row', function () {
    const $formRow = $(this).closest('.form-row');
    $formRow.parent().after($formRow.clone());
  });
});

香草Javascript，供参考：

const $formRow = document.querySelector('.form-row');

document.onclick = (e) => {
  if (!e.target.classList.contains('add_row')) return;
  $container.after($formRow.cloneNode(true));
};

Answer 3

代码中的改动很小

$(document).on('click', '.add_row', function (e) {
  $(this).closest('.form-row').clone().insertAfter($(this).closest('.form-row'));
});

使用javascript jquery将html附加到具有指定类的按钮最接近的div

3 个答案: