Comment déplacez-vous un élément vers le dernier enfant?

<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>

J'essaie de trouver un moyen de déplacer .email-block à l'intérieur du dernier enfant de .single-data-item pour chaque élément. J'ai eu des problèmes qui prennent tout '.email-block` et les déplacent vers le premier élément. Quelque chose qui ressemble à ceci:

<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>
0
Gregory Schultz 8 avril 2020 à 12:11

3 réponses

Vous pouvez essayer la méthode suivante en utilisant .each() et .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>
0
Mamun 8 avril 2020 à 09:35

Je pense que appendChild() résoudra votre problème.

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);
1
Kevin 8 avril 2020 à 09:21

Voulez-vous quelque chose comme ça?

let emailBlock = $('.email-block').detach();
$('.single-data-item .line_wrap').last().append(emailBlock);
1
Roger the Shrubber 8 avril 2020 à 09:22