Ich muss alle 4 aufgelisteten Elemente eine Klassenschleife erstellen, ungefähr so:

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

Ich verwende den folgenden JQuery-Code, um eine Klasse hinzuzufügen:

jQuery(document).ready(function(){
  $(".list li").each(function(i) {
    $(this).addClass("color-" + (i+1));
  });
});

Irgendeine Idee, was ich tun kann? Vielen Dank

1
yorchp 19 Nov. 2013 im 19:54

5 Antworten

Beste Antwort

Versuche dies:

jQuery(document).ready(function(){
  $(".list li").each(function(i) {
    var num = (i % 4) + 1;
    $(this).addClass("color-" + num);
  });
});
3
gloomy.penguin 19 Nov. 2013 im 15:56

Sie können den Selektor $(".list li:nth-child(4n)") verwenden

0
Krishna 19 Nov. 2013 im 15:58

Sie müssen das {verwenden Moduloperator {X0}}

jQuery(document).ready(function(){
  $(".list li").each(function(i) {
    $(this).addClass("color-" + ((i%4)+1));
  });
});

jQuery-Demo http://jsfiddle.net/Ana3q/1


Oder Sie können Javascript vollständig vermeiden und {{X0} verwenden } CSS-Auswahl

ul.list li:nth-child(4n+1){}
ul.list li:nth-child(4n+2){}
ul.list li:nth-child(4n+3){}
ul.list li:nth-child(4n+4){}

Nur CSS-Demo http://jsfiddle.net/Ana3q/

2
Gabriele Petrioli 19 Nov. 2013 im 16:02

Versuchen Sie Folgendes: http://jsfiddle.net/sU39B/

$(function(){
  i=0;
  $('.list li').each(function(){
    if(i==4) i=0;
    i++;
    $(this).addClass('color-'+i);
  });
});
1
Aamir Afridi 19 Nov. 2013 im 16:00

Ich denke, :nth-child wird hier gut passen

for (var i = 1; i <= 4; i++) {
    $('.list li:nth-child(4n + ' + i + ')').addClass(i + '')
}

Demo: Fiddle

0
Arun P Johny 19 Nov. 2013 im 15:58