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

StackOverflow https://stackoverflow.com/questions/704858

  •  22-08-2019
  •  | 
  •  

Вопрос

Я пытаюсь клонировать элемент списка, а затем добавить его в конец этого клонированного элемента списка. Обратите внимание, что он должен находиться под клонируемым элементом списка, а не внизу списка, поскольку я могу сделать это сам.Цель состоит в том, чтобы использовать его с сортировкой 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>

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

Это было полезно?

Решение

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

Другие советы

я думаю, что ты хочешь этого:

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

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

$(targetStory).clone().inserAfter(targetStory);
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top