Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Объединять div c одинаковым классом (https://javascript.ru/forum/misc/86479-obedinyat-div-c-odinakovym-klassom.html)

maiskiykot 02.06.2025 16:50

Объединять div c одинаковым классом
 
Всем привет!
Опять вот затык возник. Есть некая страница, на которую динамически подгружаются div с инфой. Есть необходимость на самом примитивном уровне объединять элементы с одинаковым классом (id как я понимаю - не годится). Подскажите решение плиззз. Можно даже без удаления одного из элементов - просто чтобы они склеивались к примеру <div class="0"> с <div class="0"> а див класс 5 с дивом класс 5 и т.д. Спасибо!

voraa 03.06.2025 07:34

<head>
<style>
.c0 {
	width: 300px;
	border: 1px solid red;
}
.c5 {
	width: 350px;
	border: 1px solid green;
}
</style>
</head>
<body>
<div class="c0">
Это первый Div.c0
<br>
Сюда будем переносить
<br>
</div>

<div class="c5">
Это первый Div.c5
<br>
Сюда будем переносить
<br>
</div>

<div class="c0">
Это второй Div.c0
<br>
Его будем переносить
<br>
</div>

<div id="f5" class="c5">
Это второй Div.c5
<br>
Его будем переносить
<br>
</div>

<div class="c0">
Это третий Div.c0
<br>
Его тоже перенесем 
<br>
</div>

<div id="f5" class="c5">
Это третий Div.c5
<br>
Его тоже перенесем 
<br>
</div>

<div id="f5" class="c5">
Это четвертый Div.c5
<br>
И его перенесем 
<br>
</div>

<script>
/* Перенести информацию из всех элементов с указанным селектором 
в первый элемент с таким селектором. Остальные элементы удалить */
function moveСontents (selector) {
	const elems = [...document.querySelectorAll(selector)];
	if (elems.length <= 1) return;
	const first = elems[0];
	for (let i = 1; i < elems.length; i++) {
		first.insertAdjacentHTML('beforeend', elems[i].innerHTML);
		elems[i].remove();
	}
}

moveСontents ('.c0');
moveСontents ('.c5');

</script>
</body>

maiskiykot 03.06.2025 11:35

Спасибо за подсказку! Но тут одна проблема - номера будут все время разные, только 0 будет повторяться периодически. Остальные будут от 1 до бесконечности с группировкой 2-5 примерно элементов.

ksa 03.06.2025 11:57

Цитата:

Сообщение от maiskiykot
Но тут одна проблема - номера будут все время разные

Всегда можно сделать модификацию... ;)

<style>
.c0 {
	width: 300px;
	border: 1px solid red;
}
.c5 {
	width: 350px;
	border: 1px solid green;
}
</style>
<main>
	<div class="c0">
	Это первый Div.c0
	<br>
	Сюда будем переносить
	<br>
	</div>

	<div class="c5">
	Это первый Div.c5
	<br>
	Сюда будем переносить
	<br>
	</div>

	<div class="c0">
	Это второй Div.c0
	<br>
	Его будем переносить
	<br>
	</div>

	<div id="f5" class="c5">
	Это второй Div.c5
	<br>
	Его будем переносить
	<br>
	</div>

	<div class="c0">
	Это третий Div.c0
	<br>
	Его тоже перенесем 
	<br>
	</div>

	<div id="f5" class="c5">
	Это третий Div.c5
	<br>
	Его тоже перенесем 
	<br>
	</div>

	<div id="f5" class="c5">
	Это четвертый Div.c5
	<br>
	И его перенесем 
	<br>
	</div>
<main>

<script>
/* Перенести информацию из всех элементов с указанным селектором 
в первый элемент с таким селектором. Остальные элементы удалить */
function moveСontents (selector) {
	const elems = [...document.querySelectorAll(selector)];
	if (elems.length <= 1) return;
	const first = elems[0];
	for (let i = 1; i < elems.length; i++) {
		first.insertAdjacentHTML('beforeend', elems[i].innerHTML);
		elems[i].remove();
	}
}
[...document.querySelectorAll('main > div')]
	.reduce((s, {className: c}) => (s.add(c), s), new Set)
	.forEach(c => moveСontents('.' + c))
</script>

voraa 03.06.2025 16:21

Цитата:

Сообщение от maiskiykot
Но тут одна проблема -

Очень полезно о задаче рассказывать все и сразу.
А так - каков вопрос, таков ответ.
И даже сейчас вы не говорите, а что делать с первым дивом с номером N. Просто добавлять? А куда?
Как приходят (откуда то? ) эти дивы? По одному? Пачками? Что именно приходит (откуда то берется готовый элемент или просто html текст чего то)?
Мы же не можем все это сами додумывать и тупо предполагать.
А от этого зависит способ решения.

maiskiykot 06.06.2025 14:56

Прошу прощения - я просто сам плохо представляю javascript - его ведь руками не пощупаешь как тот же php - крутится где-то, а где? Просто страница формируется на php динамически - это такие ярлыки от определенных авторов скажем. Вот, чтобы объединять эти ярлыки я и подумал, что не проще ли javascriptoм сортировать чем на пыхе писать пол-страницы кода для сортировки.


Часовой пояс GMT +3, время: 15:10.