Как перенести элемент из одного места в другое?

Question

[nitashy]

Доброго времени суток. В JS я очень сильно плаваю (примерно как камень в воде, особенно когда js занимаешься для удовольствия, он связан с твоим хобби по касательной) и проблему в одно лицо решить мне не уровню, помогите, пожалуйста. Для укорачивания соо под спойлеры все уберу.

Есть следующий следующая разметка

<div class="container">
  <div class="wrapper">
    <div class="wrapper-item">
      <h3>заголовок 1</h3>
      текст 1
    </div>
  </div>
 </div>
<div class="container">
  <div class="wrapper">
    <div class="wrapper-item">
      <h3>заголовок 2</h3>
      текст 2
    </div>
  </div>
</div>
<div class="container">
  <div class="wrapper">
    <div class="wrapper-item">
      <h3>заголовок 3</h3>
      текст 3
    </div>
  </div>
</div>

Не обходимо h3 перетащить перед .wrapper.

То бишь, привести всё вот к такому виду.

<div class="container">
  <h3>заголовок 1</h3>
  <div class="wrapper">
    <div class="wrapper-item">
      текст 1
    </div>
  </div>
 </div>
<div class="container">
  <h3>заголовок 2</h3>
  <div class="wrapper">
    <div class="wrapper-item">
      текст 2
    </div>
  </div>
</div>
<div class="container">
  <h3>заголовок 3</h3>
  <div class="wrapper">
    <div class="wrapper-item">
      текст 3
    </div>
  </div>
</div>

Сделать я это пытаюсь следующим скриптом.

$(".container").each(function(){
$(".wrapper h3").insertBefore('.wrapper');
});

Как можно понять, у меня не выходит - заголовки дублируются в каждый блок. Помогите, пожалуйста, исправить, моих скудных познаний недостаточно(

Answer 1

[0xD34F]

Куда и что надо перенести:

const where = '.container';
const what = '.wrapper-item h3';

Переносим:

$(where).prepend(function() {
  return $(what, this);
});

или

document.querySelectorAll(where).forEach(n => {
  n.prepend(n.querySelector(what));
});

Comments

[nitashy]

Вы спасли мою жалкую душонку от мучительных страданий, спасибо!