Как переместить 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

Хочешь что-нибудь подобное?

let emailBlock = $('.email-block').detach();
$('.single-data-item .line_wrap').last().append(emailBlock);

Answer 2

Вы можете попробовать следующий способ, используя .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>

Answer 3

Я думаю, что appendChild() решит вашу проблему.

const singleDataItem = document.querySelector(".single-data-item"); //get the .single-data-item element
const emailBlock = document.querySelector(".email-block"); //get the .email-block element
singleDataItem.appendChild(emailBlock);