Почему jQuery Append не работает для конца элементов списка HTML?

Question

Я пытаюсь клонировать элемент списка, а затем добавить его в конец этого клонированного элемента списка, обратите внимание, что он должен быть ниже клонируемого элемента списка, а не внизу списка, поскольку я могу это сделать себя. Цель состоит в том, чтобы использовать его с сортируемым jQuery.ui.

Все работает нормально, на самом деле я даже могу получить право на клонирование и добавление. Однако он добавляет перед закрывающим тегом </li>, и я не могу заставить его добавить после этого тега.

Это HTML-разметка:

<ul id="column-2" class="connectedSortable">
    <li class="ui-state-default">
        <div class="label">feature</div>
        <div class="action">
            <div class="delete"></div>
            <div class="other"></div>
        </div>
    </li>
</ul>

Часть, с которой мы имеем дело, это class="other", которая при нажатии будет дублировать элемент списка.

Пока это jQuery:

// This works fine
$(".other").click(function() {

    // This needs to be set (global) to be used later on in some future code.
    actionTarget = this;        

    // This grabs the whole list item
    var targetStory = $(actionTarget).parent().parent();

    // This clones the list item, as well as appending 
    // that clone to the cloned list item
    $(targetStory).clone().appendTo(targetStory);

})

Это хорошо работает, захватывает элемент списка, клонирует его, а затем выводит его на экран - но не в том месте: (

<ul id="column-2" class="connectedSortable">
    <li class="ui-state-default">
        <div class="label">feature</div>
        <div class="action">
            <div class="delete"></div>
            <div class="other"></div>
        </div>
        <li class="ui-state-default">
            <div class="label">feature</div>
            <div class="action">
                <div class="delete"></div>
                <div class="other"></div>
            </div>
        </li>
    </li>
</ul>

У кого-нибудь есть идеи, почему он не добавляется в конец клонируемого элемента списка и как решить эту проблему?

Answer 1

возможно, вы хотите использовать после вместо appendTo

Answer 2

Я думаю, что вы хотите это:

$(targetStory).clone().appendTo(targetStory.parent());

Answer 3

Я думаю insertAfter - это то, что вы ищете. after будет вставлять исходный узел после клона, а не клон после исходного узла. Примерно так должно работать:

$(targetStory).clone().inserAfter(targetStory);