Перенести элементы одного класса в блоки другого класса на js

Question

Помогите, пожалуйста, перенести несколько элементов одного класса, в необходимые блоки. Блоков и элементов может быть неограниченное количество. Буду рад подсказке как на чистом js, так и на jquery.

Вот так ситуация выглядит изначально:

<div class="block">
  <div class="perenesti-syuda">Перенести сюда 1
    <p>p1</p>
    <p>p2</p>
  </div>

  <div>Переносим отсюда 1
    <p class="perenosimiy-element"><b>Переносимый элемент 1</b></p>
    <p>p3</p>
    <p>p4</p>
  </div>
</div>

<div class="block">
  <div class="perenesti-syuda">Перенести сюда 2
    <p>p5</p>
    <p>p6</p>
  </div>

  <div>Переносим отсюда 2
    <p class="perenosimiy-element"><b>Переносимый элемент 2</b></p>
    <p>p7</p>
    <p>p8</p>
  </div>
</div>

А в результате должно быть вот так:

<div class="block">
  <div class="perenesti-syuda">Перенести сюда 1
    <p class="perenosimiy-element"><b>Переносимый элемент 1</b></p>
    <p>p1</p>
    <p>p2</p>
  </div>

  <div>Переносим отсюда 1

    <p>p3</p>
    <p>p4</p>
  </div>
</div>

<div class="block">
  <div class="perenesti-syuda">Перенести сюда 2
    <p class="perenosimiy-element"><b>Переносимый элемент 2</b></p>
    <p>p5</p>
    <p>p6</p>
  </div>

  <div>Переносим отсюда 2

    <p>p7</p>
    <p>p8</p>
  </div>
</div>

Answer 1

Для решения этой задачи можно использовать методы DOM для поиска элементов и изменения их местоположения.

Пример решения на чистом JavaScript:

    // Получаем все элементы с классом 'perenosimiy-element'
    const elementsToMove = document.querySelectorAll('.perenosimiy-element');

    // Получаем блоки с классом 'perenesti-syuda'
    const targetBlocks = document.querySelectorAll('.perenesti-syuda');

    // Перебираем каждый блок и перемещаем в него все элементы с классом 'perenosimiy-element'
    targetBlocks.forEach(block => {
      elementsToMove.forEach(element => {
        block.appendChild(element);
      });
    });

В этом примере мы используем метод querySelectorAll() для получения всех элементов с классом 'perenosimiy-element' и блоков с классом 'perenesti-syuda'. Затем мы используем метод forEach() для перебора каждого блока и каждого элемента, чтобы переместить элементы внутрь блоков, используя метод appendChild().

Answer 2

Извините за ошибку в предыдущем ответе. Чтобы переместить каждый элемент perenosimiy-element в ближайший блок perenesti-syuda, можно использовать следующий код:

// Получаем все элементы с классом 'perenosimiy-element'
const elementsToMove = document.querySelectorAll('.perenosimiy-element');

// Перебираем каждый элемент 'perenosimiy-element'
elementsToMove.forEach(element => {
  // Получаем ближайший родительский блок с классом 'perenesti-syuda'
  const targetBlock = element.closest('.perenesti-syuda');
  
  // Если блок найден, перемещаем элемент внутрь него
  if (targetBlock) {
    targetBlock.appendChild(element);
  }
});

В этом примере мы используем метод querySelectorAll() для получения всех элементов с классом perenosimiy-element. Затем мы используем метод forEach() для перебора каждого элемента и для каждого элемента находим ближайший родительский блок с классом perenesti-syuda, используя метод closest(). Если блок найден, мы перемещаем элемент внутрь него, используя метод appendChild().

Answer 3

Вы можете использовать querySelectorAll для выбора всех элементов с классом perenosimiy-element, а затем перебрать их и использовать insertBefore для перемещения элемента перед первым элементом в блоке с классом perenesti-syuda. Вот пример решения на чистом JavaScript:

const elementsToMove = document.querySelectorAll('.perenosimiy-element');
elementsToMove.forEach((element) => {
  const parent = element.parentNode;
  const target = document.querySelector('.perenesti-syuda');
  target.insertBefore(element, target.firstChild);
});

Альтернативно, если вы предпочитаете использовать jQuery, вы можете использовать функцию appendTo() для перемещения элементов. Вот пример кода:

$('.perenosimiy-element').appendTo('.perenesti-syuda');

Answer 4

Спасибо всем за помощь!

Помогло следующее:

const elementsToMove = document.querySelectorAll('.perenosimiy-element');
elementsToMove.forEach((element) => {
  const parent = element.closest(".block");
  const target = parent.querySelector('.perenesti-syuda');
  target.insertBefore(element, target.firstElementChild);
});

БЛОГ НА HUSL

Перенести элементы одного класса в блоки другого класса на js

Ответы (4 шт):