¿Por qué no jQuery Anexar el trabajo para el final de HTML los Elementos de la Lista?

Question

Estoy tratando de clonar a un elemento de la lista y, a continuación, añadir a la parte inferior de la clonado elemento de la lista, tenga en cuenta que debe estar por debajo del elemento de lista que se clona, no en la parte inferior de la lista como puedo hacer que me.El propósito es utilizar con jQuery.interfaz de usuario que se pueden ordenar.

Todo funciona bien, de hecho, incluso se puede obtener la clonación y la anexa a la derecha.Sin embargo, se anexa antes de el cierre </li> de la etiqueta, y para la vida de mí no puedo forzarlo a anexar después de esta etiqueta.

Este es el lenguaje de Marcado 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>

La parte que nos interesa es class="other" que al ser hecho clic en duplicar el elemento de la lista.

Este es el jQuery hasta ahora:

// 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);

})

Esto funciona bien, se toma el elemento de la lista, clones, luego vuelca en la pantalla, pero en el lugar equivocado :(

<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>

Alguien tiene alguna idea de por qué no añadir texto al final de la lista de elementos que se clona, y cómo se resuelve esto?

Answer 1

quizás desea utilizar después en lugar de appendTo

Answer 2

Creo que lo que quiere es la siguiente:

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

Answer 3

InsertAfter es lo que estás buscando. después sería insertar el nodo original después de la clonación, en lugar del clon después de que el nodo original. Algo como esto debería funcionar:

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