Объединять div c одинаковым классом
Всем привет!
Опять вот затык возник. Есть некая страница, на которую динамически подгружаются div с инфой. Есть необходимость на самом примитивном уровне объединять элементы с одинаковым классом (id как я понимаю - не годится). Подскажите решение плиззз. Можно даже без удаления одного из элементов - просто чтобы они склеивались к примеру <div class="0"> с <div class="0"> а див класс 5 с дивом класс 5 и т.д. Спасибо! |
<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> |
Спасибо за подсказку! Но тут одна проблема - номера будут все время разные, только 0 будет повторяться периодически. Остальные будут от 1 до бесконечности с группировкой 2-5 примерно элементов.
|
Цитата:
<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> |
Цитата:
А так - каков вопрос, таков ответ. И даже сейчас вы не говорите, а что делать с первым дивом с номером N. Просто добавлять? А куда? Как приходят (откуда то? ) эти дивы? По одному? Пачками? Что именно приходит (откуда то берется готовый элемент или просто html текст чего то)? Мы же не можем все это сами додумывать и тупо предполагать. А от этого зависит способ решения. |
Прошу прощения - я просто сам плохо представляю javascript - его ведь руками не пощупаешь как тот же php - крутится где-то, а где? Просто страница формируется на php динамически - это такие ярлыки от определенных авторов скажем. Вот, чтобы объединять эти ярлыки я и подумал, что не проще ли javascriptoм сортировать чем на пыхе писать пол-страницы кода для сортировки.
|
Часовой пояс GMT +3, время: 15:10. |