Цикл при новом элементе

@bombom · Регистрация: 20.12.2013

Студворк — интернет-сервис помощи студентам

Приветствую. Есть такая структура, грубо говоря происходит поиск на странице блока t700__textwrapper (их может быть несколько), после чего в нем создается блок с классом merge и туда перемещается блок t700__title-wrapper. Подскажите пожалуйста, как возможно сделать цикл, чтобы при обнаружении еще одного блока t700__textwrapper, подобная процедура процедура повторялась уже в новом обнаруженном блоке: добавление блока -присвоение класса-перемещение блока, как описывалось ранее?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
let block = document.getElementsByClassName('t700__textwrapper');
    let element = document.createElement('div');
    element.className = 'merge';
    element.textContent = '';
    block[0].prepend(element);
    
 
    document.querySelector('.merge').insertAdjacentElement(
    'beforeend', 
    document.querySelector('.t700__title-wrapper')
);

@voraa · 17.03.2024, 17:18

Не понятно
Блоков .t700__title-wrapper тоже несколько, или он один и всюду надо его копию вставлять?

Добавлено через 8 минут
Если он один, то так

JavaScript
1
2
3
4
5
6
7
8
9
10
const textblocks = document.querySelectorAll('t700__textwrapper');
const titleblock = document.querySelector('.t700__title-wrapper');
 
for(const block of textblocks) {
    const element = document.createElement('div');
    element.className = 'merge';
    element.append(titleblock.cloneNode(true));
    block.prepend(element); 
}
titleblock.remove();

@bombom · 17.03.2024, 17:23 **[ТС]**

voraa,
сейчас получается вот как:
происходит поиск блока t700__textwrapper, далее в этом блоке создается блок с классом "merge".

После этой процедуры, выполняется поиск блока с классом "merge" и туда помещается другой уже существующий блок на странице t700__title-wrapper (извиняюсь, что не описал, что это за блок, но он не суть важен, просто он есть на странице и его надо переместить в другой).

Суть в том, что t700__textwrapper это основной большой блок и их может быть несколько, я пытаюсь сделать, чтобы при появлении еще одного t700__textwrapper на странице, в нем также создавался блок с классом merge, и туда помещался t700__title-wrapper.

@voraa · 17.03.2024, 17:31

Сообщение от bombom

и туда помещался t700__title-wrapper.

Он один? Один блок нельзя поместить в разные места. Но можно сделать его копию.

Добавлено через 2 минуты

Сообщение от bombom

чтобы при появлении еще одного t700__textwrapper на странице,

Что значит "при появлении"? Их изначально может быть несколько, или потом, уже после загрузки страницы, могут появиться еще?

Добавлено через 2 минуты

Сообщение от bombom

После этой процедуры, выполняется поиск блока с классом "merge"

А зачем его искать? Вы его создали и ссылка на него в переменной.

@bombom · 17.03.2024, 17:42 **[ТС]**

Сообщение от voraa

Он один? Один блок нельзя поместить в разные места.

У меня цель - отредактировать карточку товара:
Структура в изначальном виде такова (t700__textwrapper и t700__title-wrapper присутствуют всегда при добавлении новой карточки):

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="rec1111"> 
 
<div class="t700__textwrapper">
 
</div>
 
<div class="t700__title-wrapper">
   Lorem ipsum
</div>
 
</div>

Далее, после отработки скрипта, получается такая структура такого вида:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="rec1111"> 
 
<div class="t700__textwrapper">
  <div class="merge>
     <div class="t700__title-wrapper">
        Lorem ipsum
     </div>
  </div>
</div>
 
</div>

Вопрос в том, что если добавляется новая карточка со стартовым содержанием, т.е. такая:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="rec2222"> 
 
<div class="t700__textwrapper">
 
</div>
 
<div class="t700__title-wrapper">
   Lorem ipsum
</div>
 
</div>

Активировался скрипт и уже в новой карточке товара (id="rec2222") проделывалась та же процедура (создание блока с классом merge, перемещение туда t700__title-wrapper), чтоб в итоге получилось:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="rec2222"> 
 
<div class="t700__textwrapper">
  <div class="merge>
     <div class="t700__title-wrapper">
        Lorem ipsum
     </div>
  </div>
</div>
 
</div>

И вот как это можно сделать циклом

@voraa · 17.03.2024, 17:56

Вы не привели пример, когда t700__textwrapper несколько. Как это расположено изначально, и что должно получиться в итоге.
Я не понимаю, сколько у вас блоков t700__title-wrapper?

Добавлено через 5 минут
Вроде понял.
Тогда так

JavaScript
1
2
3
4
5
6
7
8
9
10
const textblocks = document.querySelectorAll('.t700__textwrapper');
 
for(const block of textblocks) {
    const parent = block.parentElement;
    const titleblock = parent.querySelector('.t700__title-wrapper');
    const element = document.createElement('div');
    element.className = 'merge';
    element.append(titleblock);
    block.prepend(element); 
}

@bombom · 17.03.2024, 18:08 **[ТС]**

voraa, Спасибо огромное, то что нужно!

Новые блоги и статьи Все статьи Все блоги /
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .

@bombom 3 / 3 / 1 Регистрация: 20.12.2013 Сообщений: 106
	17.03.2024, 17:23 [ТС]
	voraa, сейчас получается вот как: происходит поиск блока t700__textwrapper, далее в этом блоке создается блок с классом "merge". После этой процедуры, выполняется поиск блока с классом "merge" и туда помещается другой уже существующий блок на странице t700__title-wrapper (извиняюсь, что не описал, что это за блок, но он не суть важен, просто он есть на странице и его надо переместить в другой). Суть в том, что t700__textwrapper это основной большой блок и их может быть несколько, я пытаюсь сделать, чтобы при появлении еще одного t700__textwrapper на странице, в нем также создавался блок с классом merge, и туда помещался t700__title-wrapper. 0

@bombom 3 / 3 / 1 Регистрация: 20.12.2013 Сообщений: 106
	17.03.2024, 18:08 [ТС]
	voraa, Спасибо огромное, то что нужно! 0

Цикл при новом элементе

Решение