Question

我们有一个页面列出了用户购物车中的商品。 “编辑”和“删除”操作的每个项目都会显示链接。我们想通过使用javascript将其放置在删除链接上方来测试编辑链接的位置，但是当用户购物车中存在未知数量的项目时，我不知道该怎么做。

dom的片段如下：

<div class="item-table first">
    <div class="item" data-part-number="ABC123">
        <a href="/item1detailurl" title="item name"><h3 class="item-name">Item 1 name</h3></a>
        <dl>
            <dt class="item-attribute">Color:</dt><dd class="item-attribute-value">Blue</dd>
            <dt class="edit"><a href="/edititem1url" class="">Edit</a></dt><dd></dd>
        </dl>
    </div>
    <div class="item-qty">
        <span class="item-qty">QTY:</span>1
        <p><a class="delete-item" data-action="delete" href="/deleteitem1url"">Remove Item</a></p>
    </div>
</div>

<div class="item-table">
    <div class="item" data-part-number="DEF456">
        <a href="/item2detailurl" title="item name"><h3 class="item-name">Item 2 name</h3></a>
        <dl>
            <dt class="item-attribute">Color:</dt><dd class="item-attribute-value">Black</dd>
            <dt class="edit"><a href="/edititem2url" class="">Edit</a></dt><dd></dd>
        </dl>
    </div>
    <div class="item-qty">
        <span class="item-qty">QTY:</span>1
        <p><a class="delete-item" data-action="delete" href="/deleteitem2url"">Remove Item</a></p>
    </div>
</div>

所需状态将每个Edit链接移动到包含Remove Item链接的现有p元素上方的新p元素内。

Answer 1

这应该这样做：

  $('.item-table').each(function() {
      var deleteItem = $(this).find('.delete-item');
      var editItem = $('<p></p>').append($(this).find('.edit'));
      $(deleteItem).before($(editItem));
  });

Answer 2

如果您可以使用jQuery，这应该可以解决问题：

$('.item-table .item').each(function() {
  $(this).find('.edit').insertBefore($(this).next('.item-qty').find('.delete-item'));
});

基本上，您需要遍历.item中的每个.item-table。获得.item后，您需要找到.edit元素并使用insertBefore查找相应的.delete-item节点，并在其前面插入所选的.edit节点

此处有working example with jQuery和actual results。

在循环中移动dom元素

2 个答案: