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

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/