jquery - 使用 jQuery 动态构建子菜单

Question

具有以下结构：

<div id="block1">
   <ul class="category">
      <li>Comedy</li>
   </ul>
</div>

<div id="block2">
   <ul class="category">
       <li>Comedy</li>
       <li>Drama</li>
   </ul>
</div>

无序列表category是用 php 生成的foreach()，在某些块中ul可能包含 1 li，而在其他块中可能包含 2、3 或 X li，因此我需要li在子菜单中将这些额外的 s 转换为第一个li在顶部。

• 我的问题是，如何选择<li>第一个之后的其余部分？因为一旦我有了其余的li，我可以将它们包装在另一个中ul并构建子菜单。

我可以使用以下代码来过滤具有多个选项的列表，但是接下来呢？

    $('.categories').filter(function() {
        if($(this).children("li").length > 1) {
            console.log($(this).text());
        }
    });

Answer 1

你可以使用wrapAll方法。

$('ul.category').each(function(){
  $('li:gt(0)', this).wrapAll('<ul/>')
})

Answer 2

li在第一个使用之后获取所有元素.slice()

$(this).children("li").slice(1);

然后你可以使用这些元素来做你需要的任何包装