为什么 jQuery Append 不能用于 HTML 列表项的末尾? [英] Why doesn't jQuery Append work for the end of HTML List Items?

问题描述

我正在尝试克隆一个列表项，然后将其附加到该克隆列表项的底部，注意它应该在被克隆的列表项下方，而不是在列表的底部，因为我可以这样做我.目的是将它与 jQuery.ui 可排序一起使用.

一切正常，事实上我什至可以正确地进行克隆和附加.但是，它在 before 结束 </li> 标记之前附加它，并且在我的一生中，我不能强迫它附加 after 这个标签.

这是 HTML 标记:

<div class="label">功能</div><div class="action"><div class="delete"></div><div class="other"></div>

我们关心的部分是 class="other"，点击后会复制列表项.

这是迄今为止的jQuery:

//这很好用$(".other").click(function() {//这需要设置(全局)以在以后的某些代码中使用.actionTarget = 这个；//这会抓取整个列表项var targetStory = $(actionTarget).parent().parent();//这会克隆列表项，并附加//克隆到克隆的列表项$(targetStory).clone().appendTo(targetStory);})

这很有效，它抓取列表项，克隆它，然后将其转储到屏幕上 - 但在错误的位置:(

<div class="label">功能</div><div class="action"><div class="delete"></div><div class="other"></div>

<div class="label">功能</div><div class="action"><div class="delete"></div><div class="other"></div>

有谁知道为什么它没有附加到被克隆的列表项的末尾，以及如何解决这个问题?

解决方案

也许你想使用 after 而不是 appendTo

I'm trying to clone a list item, and then append it to the bottom of that cloned list item, note that it should be below the list item being cloned, not at the bottom of the list as I can do that myself. The purpose is to use it with jQuery.ui sortable.

Everything is working fine, in fact I can even get the cloning and the appending right. However, it appends it before the closing </li> tag, and for the life of me I can't force it to append after this tag.

This is the HTML Markup:

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

The part we're concerned with is class="other" which upon being clicked on will duplicate the list item.

This is the jQuery so far:

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

})

This works well, it grabs the list item, clones it, then dumps it on the screen - but in the wrong place :(

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

Anyone have any idea why it's not appending to the end of the list item being cloned, and how to resolve this?

解决方案

perhaps you want to use after instead of appendTo

这篇关于为什么 jQuery Append 不能用于 HTML 列表项的末尾?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！