форматирование списка в столбцы, когда есть вложение

Question

задан неупорядоченный список произвольной длины, но только 1 дополнительный уровень вложенности:

<nav id="top_nav">
  <nav id="nav1">
    <ul>
      <li>saws</li>
      <li>drills
        <ul>
          <li>hammer-drills</li>
          <li>drill-drivers</li>
        </ul>
      </li>
    </ul>
  </nav>
  <nav id="nav2">...</nav>
  <nav id="nav3">...</nav>
</nav>

Я хочу отформатировать список как столбцы, разбив исходный список на списки одноуровневых элементов (разбивая каждые 14 элементов li).

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

Для каждого навигационного блока я получаю размер элементов li и нахожу точки разделения:

var max_height = 14;
$('#top_nav nav').each(function(){
    //step 1: mark 2nd tier li's with level2 class
  $(this).find('li ul li').addClass('level2');
  //step 2: mark 1st tier li's with level1 class
  $(this).find('li').not('.level2').addClass('level1');

  var li_list = $(this).find('li');
  var list_size = li_list.size();
  //find which elements to split on and number of times
  var split_points = (list_size / max_height) | 0; //bitwise OR is faster than Math.floor
  var split_point = max_height - 1;
  for (var i = 0; i < split_points; i++) {

    split_list(li_list.eq(split_point), li_list.eq(split_point + 1));
    split_point += max_height;

  }
});

функция "split_list берет" два последовательных li (но не обязательно вложенных в один и тот же ul) и разделяет их, вводя пару и

, затем запускает новый в нужных местах. Однако, похоже, что jQuery «append» и «prepend» не позволяют мне добавлять закрытые теги. Это закрывает их для меня.

Есть ли способ заставить jQuery вставить именно ту строку, которую я хочу? Или есть лучший способ сделать это?

Answer 1

Это довольно хорошо объяснено здесь Можно ли использовать Jquery для вставки закрывающего тега и открывающего тега в динамическую таблицу? Я думаю, что вы должны попытаться перестроить свою структуру, возможно, используя detach или создав новые UL и разместив там разделенные LI.

Answer 2

Просто создайте строку HTML, а затем добавьте / добавьте ее в самом конце.Это не только позволит вам создавать его по частям с закрытыми тегами, когда это необходимо, но и повышает производительность (не то, что вы заметите!).