Блог

Главная - Вопросы по программированию - Как объединить две колонки текста в одну?

Как объединить две колонки текста в одну?

#javascript #html

#язык JavaScript #HTML

Вопрос:

Как объединить два столбца текста в один с помощью JS, чтобы получилось вот так. Я знаю, что могу сделать это с помощью CSS, но дизайн сайта не позволяет этого сделать.

 lt;div class="right-col col"gt;  lt;spangt;1 line of the left columnlt;/spangt;  lt;spangt;1 line of the right columnlt;/spangt;  lt;spangt;2 line of the left columnlt;/spangt;  lt;spangt;2 line of the right columnlt;/spangt;  lt;spangt;3 line of the left columnlt;/spangt;  lt;spangt;3 line of the right columnlt;/spangt;  lt;spangt;4 line of the left columnlt;/spangt;  lt;spangt;4 line of the right columnlt;/spangt; lt;/divgt;

Внутри строк span также могут быть теги, их следует сохранить.

Исходный код:

 lt;div class="row"gt;  lt;div class="left-col col"gt;  lt;spangt;1 line of the left blocklt;/spangt;  lt;spangt;2 line of the left blocklt;/spangt;  lt;spangt;3 line of the left blocklt;/spangt;  lt;spangt;4 line of the left blocklt;/spangt;  lt;/divgt; lt;div class="right-col col"gt;  lt;spangt;1 line of the right blocklt;/spangt;  lt;spangt;2 line of the right blocklt;/spangt;  lt;spangt;3 line of the right blocklt;/spangt;  lt;spangt;4 line of the right blocklt;/spangt;  lt;/divgt;

Ответ №1:

Вы можете сделать что-то вроде:

 const left = document.querySelectorAll('.left-col span') const right = document.querySelectorAll('.right-col span')  const row = document.querySelector('.row')  left.forEach((e, i) =gt; {  row.appendChild(e);  row.appendChild(right[i]) })  document.querySelectorAll('.col').forEach(e =gt; e.remove()) 
 span {  display: block; } 
 lt;div class="row"gt;  lt;div class="left-col col"gt;  lt;spangt;1 line of the left blocklt;/spangt;  lt;spangt;2 line of the left blocklt;/spangt;  lt;spangt;3 line of the left blocklt;/spangt;  lt;spangt;4 line of the left blocklt;/spangt;  lt;/divgt;  lt;div class="right-col col"gt;  lt;spangt;1 line of the right blocklt;/spangt;  lt;spangt;2 line of the right blocklt;/spangt;  lt;spangt;3 line of the right blocklt;/spangt;  lt;spangt;4 line of the right blocklt;/spangt;  lt;/divgt; lt;/divgt;

Чтобы добавить .right-col , вы можете сделать:

 const left = document.querySelectorAll('.left-col span') const right = document.querySelectorAll('.right-col span')  const rightCol = document.querySelector('.right-col') const leftCol = document.querySelector('.left-col')  left.forEach((e, i) =gt; {  rightCol.appendChild(e);  rightCol.appendChild(right[i]) })  leftCol.remove() 
 span {  display: block; } 
 lt;div class="row"gt;  lt;div class="left-col col"gt;  lt;spangt;1 line of the left blocklt;/spangt;  lt;spangt;2 line of the left blocklt;/spangt;  lt;spangt;3 line of the left blocklt;/spangt;  lt;spangt;4 line of the left blocklt;/spangt;  lt;/divgt;  lt;div class="right-col col"gt;  lt;spangt;1 line of the right blocklt;/spangt;  lt;spangt;2 line of the right blocklt;/spangt;  lt;spangt;3 line of the right blocklt;/spangt;  lt;spangt;4 line of the right blocklt;/spangt;  lt;/divgt; lt;/divgt;

Чтобы завернуть каждую span пару в a div , вы можете сделать:

 const left = document.querySelectorAll('.left-col span') const right = document.querySelectorAll('.right-col span')  const rightCol = document.querySelector('.right-col') const leftCol = document.querySelector('.left-col')  left.forEach((e, i) =gt; {  var div = document.createElement('div')  div.appendChild(e);  div.appendChild(right[i])  rightCol.appendChild(div) })  leftCol.remove() 
 span {  display: block; } div{  border:1px solid; } 
 lt;div class="row"gt;  lt;div class="left-col col"gt;  lt;spangt;1 line of the left blocklt;/spangt;  lt;spangt;2 line of the left blocklt;/spangt;  lt;spangt;3 line of the left blocklt;/spangt;  lt;spangt;4 line of the left blocklt;/spangt;  lt;/divgt;  lt;div class="right-col col"gt;  lt;spangt;1 line of the right blocklt;/spangt;  lt;spangt;2 line of the right blocklt;/spangt;  lt;spangt;3 line of the right blocklt;/spangt;  lt;spangt;4 line of the right blocklt;/spangt;  lt;/divgt; lt;/divgt;

Комментарии:

1. Лучше сначала добавлять к фрагменту, а не непосредственно к DOM на каждой итерации. Также позволяет выполнить один replaceChild вызов на row.parent .

2. Не могли бы вы рассказать, пожалуйста, как правильно вставить отображаемый результат в div.right-col в этом коде?

3. @Alex Я обновил свой ответ. См. Второй блок кода.

4. Извините за несколько вопросов, как мы можем завернуть эти два пролета div перед вставкой?

5. @Alex Я обновил свой ответ. См. Третий блок кода.

Метки: