Question

当点击链接类'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'。我希望它被克隆然后附加，以便我可以多次运行它。我怎么能这样做????

Answer 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/>封装在其中。

Answer 2

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

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

Jquery将列表内容附加到div

2 个答案: