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

Question

我有多个重复div的 parent ，每个都包含一个“日期”div和一个图像容器。

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

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

我重复的 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).siblings('.featuredEventImage').append(this);
    });

Answer 3

尝试这个

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

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