jQuery mit einer Schaltfläche in mehreren Listen Objekte ausblenden/anzeigen

Question

Ich versuche, eine Schaltfläche für meine Webshop-Filter zu machen. In einem Filter gibt es mehrere Kategorien. Eine Kategorie wird nie mehr als 5 Elemente anzeigen, egal wie viele es sind.

Die Schaltfläche, die ich brauche, erlaubt es dem Benutzer, mehr als den Standardwert von 5 Elementen pro Kategorie anzuzeigen. Mit anderen Worten, wenn in der gegebenen Kategorie 7 Artikel vorhanden sind, wird nur 5 angezeigt. Die restlichen 2 werden ausgeblendet. Wenn Sie auf die Schaltfläche klicken, werden alle 7 Elemente angezeigt.

Ich habe versucht, dies zu tun, aber wenn ich die Taste drücken, wird es die Elemente der anderen Kategorien auch zeigen ..

var count = $('.block-layered-nav .block-content dl dd ul li').length; 
 

 
if (count > 5) { 
 
    $('.showmore').show(); 
 
    $('.block-layered-nav .block-content dl dd ul li:gt(4)').hide(); 
 
} else { 
 
    $('.showmore').hide(); 
 
} 
 

 
$('.showmore').on('click', function(e) { 
 
    $(".block-layered-nav .block-content dl dd ul li:gt(4)").toggle().parent(); 
 
    alert(myparent('li')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<div class="block block-layered-nav block-layered-nav--no-filters"> 
 
<div class="block-content toggle-content"> 
 
    <dl id="narrow-by-list"> 
 
    <dt>Wat</dt> 
 
    <dd> 
 
     <ul> 
 
     <li class="list-group-item"><span>Moi1</span><a href="#">Hout</a></li> 
 
     <li class="list-group-item"><span>Moi2</span><a href="#">Hout</a></li> 
 
     <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li> 
 
     <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li> 
 
     <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li> 
 
     <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li> 
 
     </ul> 
 
     <button onclick="" class="showmore"> 
 
      Laat meer zien 
 
     </button> 
 
    </dd> 
 
    <dt>Uitstraling</dt> 
 
    <dd> 
 
     <ul> 
 
     <li class="list-group-item"><span>Moi4</span><a href="#">Hout</a></li> 
 
     <li class="list-group-item"><span>Moi5</span><a href="#">Hout</a></li> 
 
     </ul> 
 
     <button onclick="" class="showmore"> 
 
    Laat meer zien 
 
    </button> 
 
    </dd> 
 
    <dt>Glans</dt> 
 
    <dd> 
 
     <ul> 
 
     <li class="list-group-item"><span>Moi6</span><a href="#">Hout</a></li> 
 
     <li class="list-group-item"><span>Moi7</span><a href="#">Hout</a></li> 
 
     </ul> 
 
     <button onclick="" class="showmore"> 
 
      Laat meer zien 
 
     </button> 
 
    </dd> 
 
    </dl> 
 
</div> 
 
</div>

Answer 1

Fellow Dutchmen hier auf etwas arbeiten mit Holz hm? Haha.

Das Problem ist das Folgende: Sie zählen alle Ihre li in all Ihren ul 's und addieren sie in eine Variable count. Was Sie tun müssen, ist, für jeden ul zählen, wie viele li 's gibt es darin, und wenn es mehr als 5 ist, fügen Sie nur eine show more Schaltfläche unter dieser sehr ul (gerade jetzt, fügen Sie zeigen mehr Schaltflächen überall, wenn eine der Listen 5 oder mehr Elemente enthält). Ich habe deinen Code für dich festgelegt. Ich hoffe es hilft! https://jsfiddle.net/admn32oe/12/

Veel succes verder! :-)

$('.block-layered-nav .block-content dl dd ul').each(function() { 
 

 
    var count = $(this).children('li').length; 
 

 
    if (count > 5) { 
 
    $(this).next('.showmore').show(); 
 
    $(this).find('li:gt(4)').hide(); 
 
    } else { 
 
    $(this).next('.showmore').hide(); 
 
    } 
 

 
}); 
 

 
$('.showmore').on('click', function(e) { 
 
    $(this).siblings("ul").children('li:gt(4)').toggle().parent(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block block-layered-nav block-layered-nav--no-filters"> 
 
    <div class="block-content toggle-content"> 
 
    <dl id="narrow-by-list"> 
 
     <dt>Wat</dt> 
 
     <dd> 
 
     <ul> 
 
      <li class="list-group-item"><span>Moi1</span><a href="#">Hout</a></li> 
 
      <li class="list-group-item"><span>Moi2</span><a href="#">Hout</a></li> 
 
      <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li> 
 
      <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li> 
 
      <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li> 
 
      <li class="list-group-item"><span>Moi3</span><a href="#">Hout</a></li> 
 

 
     </ul> 
 
     <button onclick="" class="showmore"> 
 
      Laat meer zien 
 
     </button> 
 
     </dd> 
 
     <dt>Uitstraling</dt> 
 
     <dd> 
 
     <ul> 
 
      <li class="list-group-item"><span>Moi4</span><a href="#">Hout</a></li> 
 
      <li class="list-group-item"><span>Moi5</span><a href="#">Hout</a></li> 
 
     </ul> 
 
      <button onclick="" class="showmore"> 
 
     Laat meer zien 
 
    </button> 
 
     </dd> 
 
     <dt>Glans</dt> 
 
     <dd> 
 
     <ul> 
 
      <li class="list-group-item"><span>Moi6</span><a href="#">Hout</a></li> 
 
      <li class="list-group-item"><span>Moi7</span><a href="#">Hout</a></li> 
 
     </ul> 
 
     <button onclick="" class="showmore"> 
 
      Laat meer zien 
 
     </button> 
 
     </dd> 
 
    </dl> 
 
    </div> 
 
</div>

Answer 2

Ich würde dies berücksichtigen:

$('.showmore').each(function() { 
    var $parent = $(this).closest("dd"), 
     $lis = $parent.find("li"), 
     len = $lis.length; 
    $parent.find("li:gt(4)").hide(); // or something cleverer perhaps using eq 
    $(this).toggle(len); 
}).on("click",function() { 
    $(this).siblings("ul").children('li:gt(4)').toggle(); 
});