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

时间：2016-10-12 14:50:30

标签： javascript jquery html twitter-bootstrap slice

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

＆＃13;
＆＃13; 
$(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);
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

您可以使用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它的位置＆gt; 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>

答案 1 :(得分：1)

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

但是，当我运行代码片段时，这些项目正确地具有绿色背景，直到＆＃34;附件5＆＃34;。 然后，剩下的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

希望它有所帮助!!

相关问题
最新问题