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

我正在尝试克隆一个列表项，然后将其附加到该克隆列表项的底部，请注意它应该在克隆的列表项下面，而不是在列表的底部，因为我自己可以这样做。 目的是将它与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>

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

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?

最满意答案

也许你想使用after而不是appendTo

perhaps you want to use after instead of appendTo

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

我正在尝试克隆一个列表项，然后将其附加到该克隆列表项的底部，请注意它应该在克隆的列表项下面，而不是在列表的底部，因为我自己可以这样做。 目的是将它与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>

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

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?

最满意答案

也许你想使用after而不是appendTo

perhaps you want to use after instead of appendTo