Targeting jedes 3., 6., 9. usw. Element einer Liste

Question

Ich benutze Zweig Templating, um eine Reihe von Elementen zu durchlaufen, die als ein Raster mit 3 Elementen in einer Zeile angezeigt würden. Wenn am Ende der Zeile ein leerer Platz ist, habe ich einen Block, der dort platziert werden würde, aber nur von dort ist ein leerer Platz. Das Folgende deckt ab, was ich benötige, fühlt sich aber ein wenig klobig an.

{% if items|length == 2 or items|length == 5 % or items|length == 8 %} 
// add a block to fill the space 
{% endif %} 

Mit jQuery würde ich so etwas wie die unten tun:

jQuery('#item:nth-child(3n+3)') 

Gibt es eine intelligentere Art und Weise über den Zweig if-Anweisung, das gleiche zu tun?

Answer 1

Sie können jede dritte Zeile wie folgt finden, fügen Sie hier nur Demo für die Tabellenzeile, Sie können es weiter nach Ihrem Bedarf überarbeiten, denke ich.

$("tr:nth-child(3n)").css("background", "yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<table> 
 
    <tr><td>1</td></tr> 
 
    <tr><td>2</td></tr> 
 
    <tr><td>3</td></tr> 
 
    <tr><td>4</td></tr> 
 
    <tr><td>5</td></tr> 
 
    <tr><td>6</td></tr> 
 
    <tr><td>7</td></tr> 
 
    <tr><td>8</td></tr> 
 
    <tr><td>9</td></tr> 
 
    <tr><td>10</td></tr> 
 
    <tr><td>11</td></tr> 
 
    <tr><td>12</td></tr> 
 
    </table>