如何使用 jQuery 移动 div 的多个实例？答案

【问题标题】：How can I use jQuery to move multiple instances of a div?如何使用 jQuery 移动 div 的多个实例？
【发布时间】：2014-08-30 11:00:52
【问题描述】：

我正在尝试将p.read-emails 移动到p.download 之后，它显示的每个实例（在同一页面上）如下所示：

<div class="episode">
   <h3>title</h3>
   <iframe></iframe>
   <p class="download"></p>
   <p class="date"></p>               <--- TO HERE--
   <p class="artist"></p>                          |
</div>                                             |
<p class="read-emails"></p>           <--- MOVE THIS

<div class="episode">
   <h3>title</h3>
   <iframe></iframe>
   <p class="download"></p>
   <p class="date"></p>               <--- TO HERE--
   <p class="artist"></p>                          |
</div>                                             |
<p class="read-emails"></p>           <--- MOVE THIS

<div class="episode">
   <h3>title</h3>
   <iframe></iframe>
   <p class="download"></p>
   <p class="date"></p>               <--- TO HERE--
   <p class="artist"></p>                          |
</div>                                             |
<p class="read-emails"></p>           <--- MOVE THIS

到目前为止我已经尝试过了，但我无法让它工作：

jQuery('p.read-emails').each(function() {
    var item=jQuery(this);
    var parentContainer=itemparents('.episode');
    item.remove();
    parentContainer.insertAfter('p.download');
    });

谁能帮帮我？

【问题讨论】：

标签： jquery dom dom-manipulation

【解决方案1】：

试试这个：

$('.download').each(function(){
   $(this).after($(this).closest('.episode').next('.read-emails'));
});

Demo

【讨论】：

【解决方案2】：

怎么样：

jQuery("p.read-emails").each(function() {
  var item = jQuery(this);
  var parentContainer = item.prev(".episode");
  parentContainer.find(".download").after(item);
});

Here's a demo

【讨论】：

【解决方案3】：

尝试一些不同的使用 eq() 选择器

 $('.download').each(function(i,val){
      $(this).after($(".read-emails").eq(i));
});

DEMO

【讨论】：

【解决方案4】：

试试这个：

jQuery('p.read-emails').each(function(){
   $(this).insertAfter($(this).prev('.episode').find('.download'));
});

【讨论】：