jquery - 计算列表元素的数量并创建 "more"下拉列表

Question

我正在尝试创建一个菜单来计算 <li> 的数量如果列表中的数量超过 5 个，请将其余的移动到下拉列表中。

基本上代码如下所示:

<ul class="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li id="more"> 
    <a href="#">More</a>
    <ul>
      <li>Move 6 here</li>
      <li>Move 7 here</li>
      <li>Move 8 here</li>
      <li>Move 9 here</li>
    </ul>
  </li>
</ul>

计算元素数量可以通过$("#menu").children().length来实现- 但我现在应该做什么？

Answer 1

$('.menu:has(li:gt(4))').each(function() {
  $(this).append('<li id="more"></li>');
  $(this).find('#more').append('<a href="#">More</a>');
  $(this).find('#more').append('<ul></ul>');
  var lis = $(this).find('li:gt(4)').not('#more');
  $(this).find('#more').find('ul').append(lis);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>

</ul>