javascript - 如何将 div 移动到具有多个元素的元素中的最后一个子元素？

Question

如何将元素移动到最后一个子元素？

<div class="mail-email-block">
  <div class="email-raw">
    <div class="single-data-item">
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
    </div>
    <div class="single-data-item">
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
    </div>
  </div>
  <div class="email-block">
    stuff
  </div>
</div>
<div class="mail-email-block">
  <div class="email-raw">
    <div class="single-data-item">
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
      <div class="line_wrap"></div>
    </div>
  </div>
  <div class="email-block">
    stuff
  </div>
</div>

我正在尝试找到一种方法将 .email-block 移动到每个元素的 .single-data-item 最后一个子元素的内部。我一直遇到问题，将所有“.email-block”并将它们移动到第一个元素。看起来像这样的东西:

<div class="email-raw">
   <div class="single-data-item">
     <div class="line_wrap"></div>
     <div class="line_wrap"></div>
     <div class="line_wrap"></div>
     <div class="email-block"></div>
   </div>
</div>

Answer 1

您可以使用.each()和.appendTo()尝试以下方式:

$('.mail-email-block').each(function(){
  $(this).find('.email-block').appendTo($(this).find('.single-data-item'));
});

.email-raw, .single-data-item{
  border: 1px solid gray;
  margin: 10px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mail-email-block">
  <div class="email-raw">
    <div class="single-data-item">
      <div class="line_wrap">11</div>
      <div class="line_wrap">11</div>
      <div class="line_wrap">11</div>
    </div>
    <div class="single-data-item">
      <div class="line_wrap">22</div>
      <div class="line_wrap">22</div>
      <div class="line_wrap">22</div>
    </div>
  </div>
  <div class="email-block">
    stuff 1
  </div>
</div>
<div class="mail-email-block">
  <div class="email-raw">
    <div class="single-data-item">
      <div class="line_wrap">33</div>
      <div class="line_wrap">33</div>
      <div class="line_wrap">33</div>
    </div>
  </div>
  <div class="email-block">
    stuff 2
  </div>
</div>