Seperates Styling für 3 alternative li's

Question

Ich arbeite an einem Projekt und ich benutze ul und li's.

Ich muss den Hintergrund für 3 alternative li ändern. Da der Listeneintrag aus dem Backend stammt, weiß ich nicht über die Nummer des Listeneintrags.

Ich versuchte mit css3 Kind Klassen, konnte aber nicht erreichen .. Gibt es eine Möglichkeit, die ich mit CSS oder JQuery erreichen kann?

.list-item li 
 
{ 
 
    width:30%; 
 
    display:inline-block; 
 
}

<ul class="list-item"> 
 
    <li>list item 1</li> 
 
    <li>list item 2</li> 
 
    <li>list item 3</li> 
 
    <li>list item 4</li> 
 
    <li>list item 5</li> 
 
    <li>list item 6</li> 
 
    <li>list item 7</li> 
 
    <li>list item 8</li> 
 
    <li>list item 9</li> 
 
</ul>

gleiche Hintergrundfarbe für die Liste 1,2,3,7,8 und 9 und andere Hintergrundfarbe für die Liste 4,5 und 6.

Wie Sie in image sehen können, Hier verwende ich Tabelle und ich erreiche dies mit nth-Kind (gerade)/(ungerade) Eigenschaft. Wegen einiger Einschränkungen kann ich die Tabelle hier nicht verwenden. Also muss dies mit li's erreicht werden.

Answer 1

Sie müssen 6n th um Stil, 6n-1 th und 6n-2 th Artikel:

.list-item li 
 
{ 
 
    width:30%; 
 
    display:inline-block; 
 
    background: #cfc; 
 
} 
 
.list-item li:nth-child(6n-2), 
 
.list-item li:nth-child(6n-1), 
 
.list-item li:nth-child(6n){ 
 
    background: #ccf; 
 
}

<ul class="list-item"> 
 
    <li>list item 1</li> 
 
    <li>list item 2</li> 
 
    <li>list item 3</li> 
 
    <li>list item 4</li> 
 
    <li>list item 5</li> 
 
    <li>list item 6</li> 
 
    <li>list item 7</li> 
 
    <li>list item 8</li> 
 
    <li>list item 9</li> 
 
    <li>list item 10</li> 
 
    <li>list item 11</li> 
 
    <li>list item 12</li> 
 
    <li>list item 13</li> 
 
    <li>list item 14</li> 
 
    <li>list item 15</li> 
 
    <li>list item 16</li> 
 
    <li>list item 17</li> 
 
    <li>list item 18</li> 
 
</ul>

Answer 2

Ich nehme an, Sie möchten dies erreichen?

Um das Styling für jedes dritte Element zu ändern, verwenden Sie :nth-child() mit z. B. 3n + 0 als Argument. Wenn Sie diese Gleichung lösen, wenn Sie n von 0 aufwärts zählen, erhalten Sie die Indizes der Elemente, die adressiert werden.

Btw:

2n + 0 mit anderen Worten ist sogar
2n + 1 mit anderen Worten ungerade

edit:

ich etwas zu erreichen wie abwechselnden Reihen eine JS-Funktion hinzugefügt, wie in dem Bild, das in der Frage später hinzugefügt wurde. Schau dir die Geige an!

var alternate = (function() { 
 

 
    var count = 0; 
 
    var flipAt = 3; 
 
    var condition = false; 
 

 
    function init(num) { 
 
    flipAt = num; 
 
    } 
 
    
 
    function process() { 
 
    if(count === flipAt) { 
 
     condition = condition ? false : true; 
 
     count = 0; 
 
    } 
 
    count++; 
 
    return condition ? true : false; 
 
    } 
 

 
    return { 
 
    init : init, 
 
    process : process 
 
    } 
 
})() 
 

 

 
$('li').each(function(index, el) { 
 
    if (alternate.process()) { 
 
    $(el).css('background', 'blue'); 
 
    } 
 
});

li:nth-child(3n+0) { 
 
    background: red; 
 
} 
 

 
li:nth-child(3n+1) { 
 
    border: 2px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
    <li>14</li> 
 
</ul>

Answer 3

kann Yo folgende CSS

li:nth-child(3n+0) { 
    background: red; 
} 
li:nth-child(3n+1) { 
    background: green; 
} 
li:nth-child(3n+2) { 
    background: blue; 
} 

zum Beispiel Arbeits Click here