Wie zeigen() und hide() Blöcke von Listenelementen mit jQuery

Question

Ich habe eine Website, die Listenelemente dynamisch erzeugt wie folgt:

<li class="comment even thread-odd thread-alt depth-1" id="li-comment-10">...</li> 
<li class="comment odd alt thread-even depth-1" id="li-comment-17">...</li> 
<li class="comment even thread-odd thread-alt depth-1" id="li-comment-20">...</li> 
<li class="comment byuser comment-author-not-used-2 odd alt depth-2" id="li-comment-21"> 
...</li> 

Es gibt derzeit mehr als 40 dieser Elemente, die das Muster oben folgen .

Ich möchte jQuery verwenden, um die Listenelemente in Blöcken von 5 anzuzeigen/zu verstecken. Ich weiß, wie man die jQuery zum Umschalten programmiert, aber was ich nicht herausfinden kann ist, wie man die Blöcke von 5 zählt und markiert und verstecken.

Das Dilemma ist, dass diese <li> automatisch in einem CMS generiert und dynamisch auf der Seite gerendert werden. Also möchte ich JavaScript/jQuery verwenden, um nach dem Rendern der Seite zu kommen und Blöcke von 5 Listenelementen zu identifizieren und irgendwie zu markieren.

Ist das machbar?

Ich hoffe, das macht Sinn.

Answer 1

Versuchen :lt() Wähler mit dem Parameter 5

$(document).ready(function() { 
 
    $("ul li:lt(5)").show() 
 
})

ul li { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> 
 
</script> 
 
<ul> 
 
    <li>0</li> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
</ul>

Answer 2

Sie können über sie mit einigen Mathe mit dem jQuery :eq() Selektor iterieren. Zum Beispiel können Sie die 2. <li> mit $("li:eq(1)") bekommen.