javascript - 如何将所有元素移动到另一个包装元素？

Question

我有两个列表(#product 和 #cart)。人们可以单击一个项目并将其一次移至第二个列表。但我希望允许人们将第一个列表中的所有项目添加到第二个列表中。反之亦然 - 从购物车中删除所有商品。

你能帮忙吗？

这是我的 html:

<h2>Product List</h2>
<a id="add-all">Add all items to cart</a>
<ul id="product">
    <li id="item1">item 1</li>
    <li id="item3">item 3</li>
    <li id="item5">item 5</li>
</ul>

<h2>Shopping Cart</h2>
<a id="remove-all">Remove all items</a>
<ul id="cart">
    <li id="item2">item 2<input type="hidden" name="cartItems" value="item2"></li>
    <li id="item4">item 4<input type="hidden" name="cartItems" value="item4"></li>
</ul>

正如您在上面看到的，当将一个商品单独添加到购物车时，我 .append 具有相同 id 的 input 标签。

粗略的 jQuery 看起来像这样:

$('#product').on('click','li', function() {
    var itemID = $(this).attr('id');
    var itemLabel = $(this).html();
    var newItemLabel = itemLabel + '<input type="hidden" name="cartItems" value="' + itemID + '">';
    $(this).remove();
    $('#cart').append('<li id="' + itemID + '">' + newItemLabel + '</li>');
});

一次一个就可以了。但我一直试图迭代产品列表中的每个项目以添加所有项目(或删除所有项目)。

你能指出我正确的方向吗？

特别是因为我需要为每个列表项添加一个输入元素。因此，我不能只采用 #product 的 html() 并将其附加到 #cart 而不循环遍历每个并附加输入。

太;博士

1. #add-all 单击应将 #product 中的所有商品移动到 #cart，向每个附加输入
2. #remove-all 单击应将 #cart 中的所有商品移动到 #product，删除所有 input 标签
3. 如何？

Answer 1

这适用于 add-all

$('#add-all').on('click', function () {
    $(this).siblings('ul').find('li').each(function (index, item) {
    $(item).append("<input type=\"hidden\" name=\"cartItems\" value=\"" + $(item).attr('id') + "\"/>");
    $('#cart').append($(item));
  });
});

您可以遵循类似的逻辑来删除所有内容。

检查这个 fiddle :http://jsfiddle.net/hcXpY/

检查此 fiddle 以删除所有代码:http://jsfiddle.net/hcXpY/2/

$('#remove-all').on('click', function () {
  $(this).siblings('ul').find('li').each(function (index, item) {
    $(item).find('input').remove();
    $('#products').append($(item));
  });
});