Question

我试图在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');
    });

有人能帮助我吗？

Answer 1

试试这个：

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

<强> Demo

Answer 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

Answer 3

试试这个：

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

Answer 4

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

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

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

4 个答案:

DEMO