在循环中移动dom元素

Move dom elements in loop

本文关键字：dom 元素 移动 循环      更新时间：2023-09-26

我们有一个页面，列出了用户购物车中的项目。"编辑"answers"删除"操作的每个项目都会显示链接。我们想通过使用javascript将Edit链接放置在remove链接上方来测试它的位置，但当用户的购物车中可能存在未知数量的项目时，我不确定如何做到这一点。

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>

所需状态将每个"编辑"链接移动到包含"删除项目"链接的现有p元素上方的新p元素中。

这应该做到：

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

如果您可以使用jQuery:，那么这就可以了

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

基本上，您需要循环遍历.item-table中的每个.item。一旦有了.item，就需要找到.edit元素，并使用insertBefore找到相应的.delete-item节点，并在其前面插入选定的.edit节点。

下面是一个使用jQuery的工作示例和实际结果。

相关文章：