Ausblenden von zusätzlichen Elementen in einer Liste mit jQuery in einer kniffligen Situation (Markup ist nicht ideal)

Question

Ich möchte eine lange Liste kurz machen, indem Sie einige Elemente in langen Unterlisten ausblenden, ohne zusätzliche Verarbeitung auf der Serverseite hinzuzufügen. Das Problem ist, dass das Markup, das vom Server kommt, nicht von mir kontrolliert wird und nicht so gestaltet ist, dass meine Arbeit einfach ist. Hier ist der Code

<ul id="long-list"> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="header"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="item"></li> 
    <li class="header"></li> 
    <li class="item"></li> 
    . 
    . 
    . 
</ul> 

Wie Sie feststellen, die Header sind Geschwister zu den Elementen. Jetzt möchte ich einen jQuery-Code haben, der nach jeder Kopfzeile nur 3 Elemente anzeigt und den Rest ausblendet, um die Liste kürzer und brauchbarer zu machen.

Hier ist mein Versuch, die nicht Arbeits sind:

$('#long-list li.header ~ li.item:gt(3)').hide(); 
    $('#long-list li.header ~ li.item:lt(3)').show(); 
    $('#long-list li.header').show(); 

Die zusätzliche Funktion eines Knotens im Grunde jeden Abschnitts ist das Hinzufügen, die sagen: „5 ist Gegenstände versteckt, zu sagen, wie viele Elemente versteckt mehr ...“

Answer 1

Dies ist, wie ich es implementiert habe. Beachten Sie, dass es weitere Funktionen wie das Hinzufügen eines Knotens am Ende von Unterlisten mit ausgeblendeten Elementen, das Ausblenden von x-Elementen und das Binden eines onclick-Ereignisses zum Umschalten verborgener Elemente enthält.

if ($('#list li.header')[0]) {  
     var i = -1000; 
     $("#list > li").each(function(){ 
     if ($(this).hasClass("header")) { 
      (i>3) && ($(this).before("<li class='more'>" + (i-3) + " more...</li>").bind("click", toggle_more()) ); 
      i = 0; 
     } 
     else { 
      i = i+1; 
     } 
     $(this).toggle(i<=3); 
     }); 
    } 

Es basiert im Wesentlichen auf dem oben genannten svinto. Ich suche immer noch nach einer besseren Leistung. Jedenfalls bin ich gerade mit den Ergebnissen zufrieden.

Das Initiieren von i mit -1000 stellt sicher, dass wir keine Einträge an der Spitze der Liste ausblenden, die keine Kopfzeile haben. Sobald wir einen Header erreichen, setzen wir das i auf Null und fangen an zu zählen.

Answer 2

könnte möglich sein, es besser zu machen, aber dies sollte funktionieren:

var i = 0; 
$("#long-list li.header:first").nextAll("li").each(function(){ 
    i = $(this).hasClass("header") ? 0 : i+1; 
    $(this).toggle(i<=3); 
}); 

(Aktualisiert keine Gegenstände vor dem ersten verstecken Header.)

Answer 3

Sie können dies nicht ohne eine Schleife in Jquery tun.

Answer 4

Das scheint für mich zu funktionieren und scheint logisch der Absicht Ihres ursprünglichen Versuchs zu folgen, nur den Geschwisterselektor verwendend.

$("li.header:first").prevAll("li.item").hide(); 
    $("li.header").each(function() { 
    $(this).nextAll("li.item:lt(3)").show(); 
    $(this).nextAll("li.item:gt(3)").hide(); 
    });