Javascript 在循环中移动dom元素

我们有一个页面，列出用户购物车中的项目。“编辑”和“删除”操作的每个项目都会显示链接。我们想通过使用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>

颜色：蓝色
数量：1

颜色：黑色
数量：1

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

这应该可以做到：

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

$（'.item table'）。每个（函数（）{
var deleteItem=$（this.find（'.delete item'）；
var editItem=$（'
）.append（$（this.find）（'.edit'））；
$（删除项）。在（$（编辑项））之前；
});

如果您可以使用jQuery，这应该可以做到：

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

基本上，您需要循环查看

.item表中的每个
.item
。拥有
.item
后，您需要找到
.edit
元素并使用
insertBefore
查找相应的
。删除item
节点并在其前面插入所选的
。编辑
节点

下面是一个例子。
您能提供一个JS代码的例子，它可以在不循环未知数量的元素的情况下工作吗？