لماذا لا يعمل 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

ربما تريد استخدامها بعد بدلاً من إلحاق بـ

Answer 2

أعتقد أن ما تريده هو هذا:

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

Answer 3

أظن إدراج بعد هو ما تبحث عنه.بعد إدراج العقدة الأصلية بعد الاستنساخ، بدلاً من الاستنساخ بعد العقدة الأصلية.شيء من هذا القبيل يجب أن تعمل:

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