將dom元素移至循環中

我們有一個列出用戶購物車中物品的頁面。鏈接會顯示在編輯和刪除操作的每個項目中。我們想通過使用javascript將它放置在刪除鏈接上方來測試編輯鏈接的位置，但是我不確定如何在用戶的購物車中存在未知數量的項目時執行此操作。將dom元素移至循環中

從DOM中的片段是以下：包含刪除項目鏈接現有的P元件上方的新p元素內

<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>

期望狀態移動每個編輯鏈接。

來源

2016-04-15 JJ2357

你能否提供一個JS代碼的例子，該代碼在沒有循環未知數量的元素的情況下工作？ – Quantastical

這應做到：

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

來源

2016-04-15 16:13:11

這應該做的伎倆，如果你可以使用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節點。

這是working example with jQuery和actual results。

來源

2016-04-15 16:14:16 Seth

將dom元素移至循環中

回答

相關問題