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

Posted 2023-05-09

【中文标题】如何使用 jQuery 移动 div 的多个实例？

【英文标题】：How can I use jQuery to move multiple instances of a 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');
    );

谁能帮帮我？

【参考方案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'));
);