Jquery将列表内容附加到div答案

【问题标题】：Jquery appending list content to divJquery将列表内容附加到div
【发布时间】：2011-03-07 21:24:28
【问题描述】：

单击链接类“ui-icon-trash”时，我想将“li”中的内容附加到“trashbin”div。我有一个列表和一些像这样的 li 内容：

  <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">item1</h5>
                    <img src="tiem.png"  alt="item1"/>
                    <div class="draggableicons">
                    <a style="float:left" href="#" title="product information here" class="ui-icon ui-icon-circle-plus">More info...</a>
<a href="link/to/cart/script/when/we/have/js/off" title="Delete this image" 
class="ui-icon ui-icon-trash">
Delete image</a>
                    </div>
                </li>

    <div id="trashbin"></div>

我想在单击“ui-icon-trash”时将“li”标签中的所有内容附加到“div”。我希望它被克隆然后附加，以便我可以多次运行它。我该怎么做？？？？

【问题讨论】：

使用 clone 和 $("#trashbin").append() 还是我错过了什么？
@R0MANARMY：克隆不会成功，因为它被复制而不是移动。
@R0MANARMY - 你应该刚刚发布你的答案，因为看起来你是对的。关于被接受的答案是一件奇怪的事情。 ;o)
@Jens Fahnenbruck：这个问题专门要求复制它。

标签： jquery list html append

【解决方案1】：

这应该可以解决问题：

$(function(){
  $('a.ui-icon-trash').click(function(){
    $(this).closest('li').appendTo('#trashbin ul');
    // or if you want to keep the original:
    $(this).closest('li').clone().appendTo('#trashbin ul');
  });
});

您需要将<ul/> 元素添加到垃圾箱，因为<li/> 必须封装在其中。

【讨论】：

$(function(){ $('a.ui-icon-trash').click(function(){ $(this).closest('li').clone().appendTo ('#trashbin ul'); }); });忘记克隆了。是的工作
我没有忘记。由于您想附加到垃圾箱，我认为您希望将其从原始列表中删除。因为这就是垃圾箱在大多数桌面操作系统中的工作方式
在他的辩护中（无论好坏），这个问题确实问 “我希望它被克隆然后附加，以便我可以多次运行它。我该怎么做？？？ ?” （而且看起来没有经过编辑）。

【解决方案2】：

当启用 javascript 时，您将需要添加一个 onclick 事件来删除此图像链接。我使用onclick方法而不是依赖jquery来添加它，因为它更容易控制服务器端。如果您只想将列表项移动到垃圾箱而不是添加副本，只需从 sendListItemToTrash 函数中的 jquery 中删除 .clone()。

<script>
function sendListItemToTrash(ListItem)
{
    $(ListItem).clone().appendTo('#trashbin ul');
}
</script>
  <li class="ui-widget-content ui-corner-tr">
                    <h5 class="ui-widget-header">item1</h5>
                    <img src="tiem.png"  alt="item1"/>
                    <div class="draggableicons">
                    <a style="float:left" href="#" title="product information here" class="ui-icon ui-icon-circle-plus">More info...</a>
<a href="link/to/cart/script/when/we/have/js/off" onclick="javascript:sendListItemToTrash($(this).closest("li"));" title="Delete this image" 
class="ui-icon ui-icon-trash">
Delete image</a>
                    </div>
                </li>

    <div id="trashbin"><ul></ul></div>

【讨论】：

这不是很不显眼。如果我使用onclick 属性，为什么要在服务器端更好地控制它？我相信将所有 JavaScript 打包在一起会更好。因此，我可以在一个地方更改与 JavaScript 相关的所有内容。而不是在所有文件之间切换，而是找到我使用可能更改的 javascript 函数的所有内容。
老实说，我更喜欢这种方法，不是从更新效率的角度，而是从页面加载的效率。在高度复杂的情况下，将点击事件应用于所有项目的 jquery 方式最终会减慢 IE 中的页面加载速度，并且您开始不得不考虑如果有人在 javascript 完成应用之前进行交互会发生什么。