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

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>