使用 jQuery 动态构建子菜单答案

【问题标题】：Building dynamically a submenu with jQuery使用 jQuery 动态构建子菜单
【发布时间】：2012-09-01 06:04:07
【问题描述】：

具有以下结构：

<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是用phpforeach()生成的，在某些块中ul可能包含1个li，在其他块中包含2、3或Xli，所以我需要转换那些额外的lis 在一个子菜单中，第一个li 在顶部。

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

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

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

【问题讨论】：

标签： jquery list submenu

【解决方案1】：

你可以使用wrapAll方法。

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

【讨论】：

也许li:gt(0) 会稍微快一点。
@VisioN 是的，但:not() 也不是慢。
@undefined 仅从 2 个选择器与 1 个选择器的角度来看。
@VisioN 已更新，仅供您使用:)。

【解决方案2】：

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

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

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

【讨论】：