ループ内でdom要素を移動

Question

ユーザーのカート内の項目を一覧表示するページがあります。編集と削除のアクションの各項目にリンクが表示されます。私たちはjavascriptを使ってリンクを削除リンクの上に置いてEditリンクの配置をテストしたいと思いますが、ユーザーのカート内に存在する可能性のある未知数の項目があるときはどうすればよいか分かりません。 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要素内に各編集リンクを移動させます。

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-tableの各.itemをループする必要があります。 .itemを取得したら、.edit要素を見つけてinsertBeforeを使用して、対応する.delete-itemノードを見つけて、その前に選択した.editノードを挿入する必要があります。

ここには、working example with jQueryとactual resultsがあります。