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>

Answer 2

要计算li内的直接后代.menu的数量：

$('.menu > li').length

在li中移动more：

$('.menu li:gt(4):not(#more)').appendTo('#more ul'); // If `#more` already exists

演示：https://jsfiddle.net/tusharj/77120z44/1/

修改

如果#more不存在：

$('.menu').append('<li id="more"><ul></ul></li>'); $('.menu li:gt(4):not(#more)').appendTo('#more ul');

演示：https://jsfiddle.net/tusharj/77120z44/4/

Answer 3

您可以使用子项长度来确定是否移动它们，如果是，则根据需要创建一个新的li和ul结构，如下所示

var $menu = $('.menu');
if ($menu.children().length > 5) {
  //create a new ul and all lis after the 5th one to that
  var $ul = $('<ul />').append($menu.children().slice(5)).hide();
  //create a new anchor element with a click handler that will toggle the more div
  var $a = $('<a />', {
    href: '#',
    text: 'More'
  }).click(function() {
    $(this).text(function(i, text) {
      return text == 'More' ? 'Less' : 'More';
    }).next().toggle();
  });
  //create a new li element and add the anchor and ul to it and append the li to the parent ul
  $('<li />', {
    id: 'more'
  }).append($a).append($ul).appendTo($menu);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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>

Answer 4

创建包含ul标记的新列表项。使用:gt(n)选择器可获取大于n的任何元素。将这些项追加到创建的元素的ul中，然后将创建的元素追加到原始列表中。

（Demo）

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

计算列表元素的数量并创建“更多”下拉列表

4 个答案: