Копировать половину массива дочерних узлов HTML

Question

У меня есть элемент HTML (скажем, div ision), который содержит набор заголовков (h2) и абзацев (p) с другим элементом внутри (некоторые ссылки, например, a).

Моя цель - разрезать мой HTML-элемент на 2 элемента одинакового размера.

Ограничения: абзацы, заголовки и блоки не должны быть вырезаны

Моя идея заключалась в том, чтобы просмотреть внутри списка дочерних узлов и скопировать childNodes каждого абзаца.

Каждый раз, когда я копирую абзац, я вычисляю размер по порядку, чтобы узнать, достиг ли я половины размера деления.

Вот код, объясняющий это:

var elm = document.getElementById('article_colonnes'); // I want to cut this into 2 parts
var paragraphesNumber = paragraphes.length;
var halfSize = elm.innerHTML.length / 2 ;
var col1 = document.getElementById('col1');
var col2 = document.getElementById('col2');
var i=0;
do {
  var node = createNodeFromParagraphe(paragraphes[i]);
  if(node) {
    col1.appendChild(node);
    // update the size of the 1st column by updating inner HTML
    col1String = col1String + paragraphes[i].innerHTML;
  }
  i++;
  // compute the size of the 1st column
  col1Size = col1String.length;
}
while(col1Size < halfSize  || i < paragraphesNumber) ;

И я делаю то же самое для 2-го столбца.

Спасибо за вашу помощь.

Answer 1

Если вы пытаетесь сделать автоматическую двухколонную разметку; взгляните на мультиколоннистов

Answer 2

Чтобы получить истинный двухколонный макет, вам нужна высота абзаца (а не символы в нем). Проблема здесь: Единственный способ получить высоту - подождать, пока браузер верстает страницу , если не задана ширина каждого элемента. В противном случае пользователь увидит мерзкое мерцание.

Поэтому я предлагаю попробовать это:

1. Используйте многостолбцовый макет, который поддерживается большинством браузеров. Если браузер не IE <= 7, все готово. </p>

2. Для IE 7 и ниже установите фиксированную ширину для всех элементов. Подождите, пока браузер верстает страницу (этого должно быть достаточно для запуска этого кода в body.onload или из тега script в конце страницы). Поместите все элементы в div с идентификатором "col1".

3. Используйте JavaScript, чтобы найти элемент на половине высоты div "col1". ( см. Здесь )

4. Если этот элемент является заголовком, пропустите один элемент.

5. Переместите следующий элемент (и все, что за ним) в div "col2".

Это должно дать вам более длинный col1 и более короткий col2.

Если перемещение не работает, вставьте невидимый символ после того, как вы определили точку разделения, получите col1.innerHtml, разделите его на символе разделения и используйте полученные две строки как innerHtml для col1 и col2.

Если это сильно мигает, попробуйте скрыть col1 и col2 во время выполнения вашего скрипта (display = 'None').