javascript - 克隆 LI div，以便将其放置在原始 LI 之后而不是末尾

Question

我希望能够单击一个项目并在该项目之后立即克隆它，此时它总是克隆到末尾，id 将其添加到列表中最后一个 LI 之后。我在这里创建了一个jsFiddle jsfiddle test

JS

const curId = 20;

function cloneIt(){
  var newId = Math.floor((Math.random() * 1000) + 1);
    const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
    newCloned.html(newCloned.html().replace(
    new RegExp(curId, 'g'),
    newId
    ));

    $("#ulContainer").append(newCloned);
}


$('#ulContainer').on('click', '.tog', function(e) {
  cloneIt();
  alert('item cloned');
    e.preventDefault();
});

HTML

<ul id='ulContainer'>
<li id="d20" class="cards__item">
    <div class="card">
        <div class="card__content cellb">
            <a id="dup20" class="tog" href="http://test/pgdup/20">
                <div class="dup20">clone me</div>
            </a>
        </div>

        <div class="card__content nick">
            <p class="card__text nick">Test Tres (20)</p>
        </div>
    </div>
</li>
<li id="d21" class="cards__item">

    <div class="card">
        <div class="card__content anchor">
            <a id="dup21" class="tog" href="http://test/pgdup/21">
                <div class="dup21">clone me</div>
            </a>
        </div>

        <div class="card__content nick">
            <p class="card__text nick">Test Tres (21)</p>
        </div>
    </div>
</li>
</ul>

Answer 1

您可以尝试使用.after()通过将事件传递给函数:

Insert content, specified by the parameter, after each element in the set of matched elements.

改变

$("#ulContainer").append(newCloned);

至

$(e.target.closest('li')).after(newCloned);

const curId = 20;

function cloneIt(e){
  var newId = Math.floor((Math.random() * 1000) + 1);
    const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
    newCloned.html(newCloned.html().replace(
    new RegExp(curId, 'g'),newId));
    $(e.target.closest('li')).after(newCloned);
}


$('#ulContainer').on('click', '.tog', function(e) {
  cloneIt(e);
  alert('item cloned');
    e.preventDefault();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='ulContainer'>
<li id="d20" class="cards__item">
    <div class="card">
        <div class="card__content cellb">
            <a id="dup20" class="tog" href="http://test/pgdup/20">
                <div class="dup20">clone me</div>
            </a>
        </div>

        <div class="card__content nick">
            <p class="card__text nick">Test Tres (20)</p>
        </div>
    </div>
</li>
<li id="d21" class="cards__item">

    <div class="card">
        <div class="card__content anchor">
            <a id="dup21" class="tog" href="http://test/pgdup/21">
                <div class="dup21">clone me</div>
            </a>
        </div>

        <div class="card__content nick">
            <p class="card__text nick">Test Tres (21)</p>
        </div>
    </div>
</li>
</ul>