Найти ближайший и вставить перед элементом

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

Пожалуйста, не используйте один и тот же идентификатор 3 раза.Идентификатор элемента должен быть уникальным для HTML-страницы.Пожалуйста, попробуйте этот способ для достижения своей цели

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

$('.btn.show').click(function() {
   const clickedButton = $(this);
   toAppend.clone().insertBefore(clickedButton);
});

Answer 2

Во-первых, идентификаторы в HTML должны быть уникальными.Теперь, чтобы применить любое действие к элементу, вызвавшему событие, используйте ключевое слово this внутри события.Но помните, что this является ключевым словом JavaScript, поэтому используйте $(this), чтобы преобразовать его в jQuery:

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

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

<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">Click Here</a>
</div>

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

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

Answer 3

Вы можете получить выбранный элемент с помощью селектора $(this) в приемнике событий click.Кроме того, не используйте один и тот же атрибут id для нескольких элементов, я заменил слушатель click, используя селектор класса show вместо неправильного, который использует атрибут id.Проверьте следующий пример:

$(document).ready(function()
{
    var toAppend = $('#appendFullWidthAll').children();

    $('.show').click(function()
    {
        var clickedButton = $(this)
        toAppend.clone().insertBefore(clickedButton);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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="showContent1">Click Here</a>
</div>

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

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

Answer 4

Вы вставляете перед любой элемент, имеющий класс show, это ваша основная проблема.Решение состоит в том, чтобы захватить элемент, на который вы щелкнули, с помощью селектора $(this), например:

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