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

【问题标题】：How can I move all elements to another wrapping element?如何将所有元素移动到另一个包装元素？
【发布时间】：2013-01-17 04:41:23
【问题描述】：

我有两个列表（#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一个input标签具有相同的id。

粗略的 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 而不遍历每个并附加一个输入。

Tl;dr

#add-all点击应该将#product中的所有项目移动到#cart，将input 附加到每个
#remove-all点击应该将#cart中的所有项目移动到#product，删除所有input 标签
怎么样？

【问题讨论】：

标签： javascript jquery loops each

【解决方案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));
  });
});

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

检查这个小提琴：http://jsfiddle.net/hcXpY/

检查这个小提琴是否也删除所有代码：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));
  });
});

【讨论】：

【解决方案2】：

迭代有什么问题？

$('#product li').each( 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>');
    removeDuplicatesFromCart();
});

function removeDuplicatesFromCart()
{
 //now remove any duplicates if there are in the carts
}

【讨论】：

我没有遇到重复的问题。只需添加所有，删除所有。无论如何，两个列表中都不应该有一个项目。
在这种情况下，我想你可以简单地使用我分享的代码。

【解决方案3】：

你可以像这样简单地做一些事情：

$("#add-all").click(function() {
    $("#products").children().appendTo("#cart");
});
$("#remove-all").click(function() {
    $("#cart").children().appendTo("#products");
});

然后，您可以添加代码以添加/删除 <input> 标记，或者始终保留输入标记，并在不在购物车中时通过 CSS 将其隐藏。

【讨论】：

【解决方案4】：

尝试为每个需要移除的产品 li 添加一个移除类。然后循环遍历 products 的所有子节点，如果 li 有一个 remove 类，则将其添加到购物车。

添加类

$('ul#products li').click( function() {
    $(this).addClass('remove');
});

循环

$('ul#products li').each( function() {
    if($(this).hasClass('remove')){
       $(this).appendTo('#cart');
    }
});

您需要一些东西来触发上述按钮吗？

【讨论】：