mrwhynot mrwhynot - 1 month ago 9
HTML Question

Show top N items from dropdown-menu with jQuery Slice

I am trying to show only the top 10 results of each list in my navigation. I have about 5 UL's and want to show the top 10 results of each. code below works only the first list. What am I missing here.



$(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

You can use css for that:

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

This will make sure only the first 10 li elements will be displayed.

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>

Here is an example (with background-change instead of hiding), just to see how it works (every li that it's pos>5 will get green background).

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>

Comments