Question

我有多个重复的父div，每个包含'日期'div和图像容器。

我想使用jQuery将每个父级中的每个“日期”div移动到重复元素结尾的另一个位置。

这怎么可能？我在这里看了其他问题，但没有什么对我有用。

我的重复HTML是：

<div class="grid_12 featureEventWrap">

<div class="row">
  <div class="grid_8" style="padding-top: 20px">

    <div class="dateWrap">
      <h6>December</h6>
      <h5>14</h5>
    </div>

    <div class="featuredEvent">
      <h2>Title</h2>
      <h3>Subtitle</h3>
      <p>Paragraph, paragraph</p>
    </div>
  </div>

  <div class="grid_4 featuredEventImage">
    <div class="featuredEventImageShad">
      <img src="images/news/1.jpg" width="270" height="175">
    </div>
  </div>

</div>
</div>

这会在页面上重复多次，但我想在每个实例上将.dateWrap移到.featuredEventImage内。非常感谢任何帮助！

Answer 1

当然，应该很容易：

$('.featureEventWrap').each(function(){
    var $destination = $(this).find(' .destinationElement ');
    $(this).find(' .elementToMove ').appendTo( $destination );
});

http://api.jquery.com/each/
http://api.jquery.com/find/
http://api.jquery.com/appendto/

Answer 2

试试这个

$('.dateWrap').each(function() {
    $(this).parents('.row:first').find('.featuredEventImage').append(this);
});

注意：当您在另一个元素中追加一个元素时，第一个元素会丢失原始父元素，它将移动到新对象中。

Answer 3

试试这个

  $('.dateWrap').each(function() {
        $(this).siblings('.featuredEventImage').append(this);
    });

将多个div移动到列表中的其他div

3 个答案: