使用 jQuery Slice 从下拉菜单中显示前 N 个项目

Question

我试图在我的导航中仅显示每个列表的前 10 个结果。我有大约 5 个 UL，并且想展示每个的前 10 个结果。下面的代码仅适用于第一个列表。我在这里错过了什么。

$(document).ready(function() {
  var elements = $(".dropdown .dropdown-menu li");
  var index = 0;

  var showFirstTen = function(index) {
    if (index >= elements.length) {
      index = 0;
    }
    console.log(index);
    elements.hide().slice(index, index + 10).show();
  }

  showFirstTen(0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories</a>
    <ul class="dropdown-menu">
      <li><a href="/">Music Accessories</a></li>
      <li><a href="/">Devices &amp; Accessories</a></li>
      <li><a href="/">Desk Accessories</a></li>
      <li><a href="/">Home Automation</a></li>
      <li><a href="/">Camera Accessories</a></li>
      <li><a href="/">Mobility Accessories</a></li>
      <li><a href="/">Monitors Accessories</a></li>
      <li><a href="/">Tablet Accessories</a></li>
      <li><a href="/">Phone Accessories</a></li>
      <li><a href="/">Scanner Accessories</a></li>
      <li><a href="/">Projector Accessorie</a></li>
      <li><a href="/">Storage Accessories</a></li>
      <li><a href="/">Communications Accessories</a></li>
    </ul>
  </li>
</ul>

Answer 1

您可以为此使用css：

li:nth-child(n+11) {
    display: none;
}

这将确保只显示前 10 个 li 元素。

ul li:nth-child(n+11) {
    display: none; 
}

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
</ul>

这是一个示例（使用背景更改而不是隐藏），只是为了看看它是如何工作的（每个 li 它的 pos>5 都会变成绿色背景）。

ul li:nth-child(n+6) {
    background: green;
}

<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories 1</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories 2</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories 3</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories 4</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories 5</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories 6</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories 7</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories 8</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
  <li class="dropdown">
    <a href="/accessories.aspx" target="" data-toggle="">Accessories 9</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/" >Music Accessories</a>
      </li>
      <li>
        <a href="/">Devices &amp; Accessories</a>
      </li>
      <li>
        <a href="/" >Desk Accessories</a>
      </li>
      <li>
        <a href="/">Home Automation</a>
      </li>
      <li>
        <a href="/" >Camera Accessories</a>
      </li>
      <li>
        <a href="/">Mobility Accessories</a>
      </li>
      <li>
        <a href="/" >Monitors Accessories</a>
      </li>
      <li>
        <a href="/">Tablet Accessories</a>
      </li>
      <li>
        <a href="/">Phone Accessories</a>
      </li>
      <li>
        <a href="/">Scanner Accessories</a>
      </li>
      <li>
        <a href="/">Projector Accessorie</a>
      </li>
      <li>
        <a href="/">Storage Accessories</a>
      </li>
      <li>
        <a href="/">Communications Accessories</a>
      </li>
    </ul>
  </li>
</ul>

Answer 2

Dekel 的 w.r.t CSS 解决方案看起来很棒。

但是，当我运行代码 sn-p 时，这些项目在“附件 5”之前正确地具有绿色背景。 然后，剩余的ul都是绿色的。 没有进一步检查。

相反，我在 JQUERY 中实现了类似的解决方案。

请在下面找到 jsfiddle 网址：

https://jsfiddle.net/Manoj85/yu2eLgLh/1

$(document).ready(function() { var num_elements_to_show = 5;

function showFirstTen(num) {
console.log(num);
$("ul.nav > li.dropdown > ul.dropdown-menu  li:nth-child(n+" + (num + 1) + ")").hide();
}
showFirstTen (num_elements_to_show);
});

这里，num_elements_to_show是一个变量，它接受将显示那么多li的

的数字

希望对你有帮助！！