jQuery: изменение порядка делений с помощью prependTo

Question

Я пытаюсь изменить все div-блоки с классом .tabs и изменить некоторый порядок div внутри.

Я бы хотел сделать sh .team-member-name внутри .team-member-description для каждого элемента div с классом .tabs

Начало :

<div class="tabs">
  <div class="team-member-name">Mirko</div>
  <div class="team-member-description"> <p>Text</p></div>
</div>
<div class="tabs">
  <div class="team-member-name">Marko</div>
  <div class="team-member-description"> <p>Text</p></div>
</div>

Результат :

<div class="tabs">
  <div class="team-member-description">
     <div class="team-member-name">Mirko</div>
     <p>Text</p>
  </div>
</div>
<div class="tabs">
  <div class="team-member-description">
    <div class="team-member-name">Marko</div>
    <p>Text</p>
  </div>
</div>

Я попробовал это со следующим, но каждое имя .team-member теперь помещено в .team-member-description: (

$(".tabs > .team-member-name").each(function(){
    $(this).prependTo($(".team-member-description"));
});

Answer 1

Вы должны использовать $(this) и найти цель по .siblings()

$(".tabs > .team-member-name").each(function() {
  $(this).prependTo($(this).siblings(".team-member-description"));
});

.team-member-description {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs">
  <div class="team-member-name">Mirko</div>
  <div class="team-member-description">
    <p>Text</p>
  </div>
</div>
<div class="tabs">
  <div class="team-member-name">Marko</div>
  <div class="team-member-description">
    <p>Text</p>
  </div>
</div>