jQuery Append が HTML リスト項目の末尾に対して機能しないのはなぜですか?

Question

リスト項目を複製し、その複製されたリスト項目の最後に追加しようとしています。自分で行うことができるので、リストの最後ではなく、複製されるリスト項目の下にある必要があることに注意してください。目的は、jQuery.ui sortable で使用することです。

すべてが正常に動作しており、実際、クローン作成と追加も正しく行うことができます。ただし、それを追加します 前に クロージング </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

私は思う 挿入後 あなたが探しているものです。after は、元のノードの後に​​クローンを挿入するのではなく、クローンの後に元のノードを挿入します。次のようなものが機能するはずです。

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