javascript - 查找最接近的元素并在元素之前插入

Question

我有三个按钮，它们克隆一个 div，它会在单击按钮之前显示 div。当前，当单击一个按钮时，div 将出现在所有三个按钮之前。我需要单击按钮以仅在单击的按钮之前插入该 div。

var toAppend = $('#appendFullWidthAll').children();

$('#showContent').click(function() {
  toAppend.clone().insertBefore('.show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="appendFullWidthAll" class="d-none">
  <ul>
    <li>Test Content</li>
    <li>Test Content</li>
    <li>Test Content</li>
    <li>Test Content</li>
  </ul>
</div>

<div class="1">
  <a class="btn btn-primary show" id="showContent">Click Here</a>
</div>

<div class="2">
  <a class="btn btn-primary show" id="showContent">Click Here</a>
</div>

<div class="3">
  <a class="btn btn-primary show" id="showContent">Click Here</a>
</div>

Answer 1

您在任何具有 show 类的元素之前插入，这是您的主要问题。解决方案是使用 $(this) 选择器捕获您单击的元素，如下所示:

$('.btn').click(function() {
    toAppend.clone().insertBefore($(this));
});