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列化嵌套列表。我想我会编写自己的脚本，然后将列表分成额外的第1层ul并将它们向左浮动（这是我到目前为止）：

对于每个导航块，我得到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中）并通过注入一对和

function split_list(li_obj, next_li_obj) {
  if (li_obj.length == 0 || next_li_obj.length == 0) {
  return false;
  }
  if (li_obj.attr('class') == 'level2' && next_li_obj.attr('class') == 'level2') {

    li_obj.append('</ul></ul>');
    next_li_obj.prepend('<ul><ul>');
  } else {
    li_obj.append('</ul>');
    next_li_obj.prepend('<ul>');
  }


}

我认为这应该会在关闭列表时起作用

然后在正确的位置开始一个新的。但是，似乎jQuery“append”和“prepend”不允许我添加未关闭的标签。它为我关闭它们。

有没有办法可以强制jQuery插入我想要的字符串？或者有更好的方法吗？

Answer 1

只需构建一个HTML字符串，然后在最后添加/添加它。这不仅可以让你在必要时一块一块地与未封闭的标签一起构建它，它也有更好的性能（不是你会注意到的！）。

Answer 2

这里很好地解释了Can I use Jquery to insert a closing </tr> tag and an opening <tr> tag inside a dynamic table? 我认为你应该尝试重建你的结构，可能会使用分离或创建新的UL并将那些分裂的LI放在那里。

在嵌套时将列表格式化为列

2 个答案: