使用 jQuery 切片显示下拉菜单中的前 N 个项目

Question

我试图在导航中仅显示每个列表的前 10 个结果。我有大约 5 个 UL，想显示每个 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 看起来不错。

但是，当我运行代码片段时，项目在 "Accessories 5" 之前正确地具有绿色背景。然后，剩下的ul都是绿色的。没有进一步检查。

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

请在下面找到 jsfiddle url：

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's

希望对您有所帮助！！

使用 jQuery 切片显示下拉菜单中的前 N 个项目

Show top N items from dropdown-menu with jQuery Slice

html

javascript

jquery

slice

twitter-bootstrap

使用 jQuery 切片显示下拉菜单中的前 N ​​个项目

Show top N items from dropdown-menu with jQuery Slice

html

javascript

jquery

slice

twitter-bootstrap

使用 jQuery 切片显示下拉菜单中的前 N 个项目