2010-05-06 3 views
5

Ich verwende derzeit diesen Code, um eine Klasse zu jeder anderen Zeile in meiner Tabelle hinzuzufügen.Wählen Sie alle anderen 2 Tabellenzeilen mit jquery

$(".stripeMe tr:even").addClass("alt"); 

jedoch auf einem anderen Tisch würde Ich mag eine Klasse Reihen 3,4, 7,8, 11,12 hinzuzufügen und so weiter ...

Ist das möglich?

+0

pls bieten eine Auszüge Tabellenstruktur! –

+2

seine eine einfache Tabellenstruktur:

Mark

Antwort

8

Sie müssen es so machen:

$(".stripeMe tr:nth-child(4n)").add(".stripeMe tr:nth-child(4n-1)").addClass("alt");​​​​​​​​ 
//or... 
$("tr:nth-child(4n), tr:nth-child(4n-1)", ".stripeMe").addClass("alt");​​​​​​​​​​​​​​​​​ 

You can see this working here.

diese verwenden:

$(".stripeMe tr:nth-child(4n), .stripeMe tr:nth-child(4n-1)").addClass("alt");​​​​​​​​ 

gets different results (nämlich in WebKit, möglicherweise andere).

+0

Dies funktionierte für mich, vielen Dank. – Mark

+0

Wie kann ich nur jetzt eine andere CSS-Klasse auf die ersten 2 Zeilen anwenden? Danke übrigens! – Mark

+0

@Mark - Wenn du nur die ** sehr ** ersten 2 meinst, dann so: '$ (". StripeMe tr: lt (2) "). AddClass (" otherClass ");' –

3

Mit dem `: n-ter child' Selektor: http://api.jquery.com/nth-child-selector/

$(".stripeMe tr:nth-child(4n), .stripeMe tr:nth-child(4n-1)").addClass("alt"); 
+0

Dies funktioniert nicht :) http://jsfiddle.net/ndn67/ –

+0

Ihr Beispiel funktioniert gut für mich ... – RoToRa

+0

@RoToRa - Ope n it in webkit :) –

1

können Sie die filter Funktion verwenden, um den Satz jede mögliche Weise, die Sie filtern mögen:

$(".stripeMe tr") 
.filter(function(i){ return (i % 4) >= 2; }) 
.addClass("alt"); 

Das das Element mit dem Index 2 halten, 3, 6, 7, 10, 11 und so weiter. Beachten Sie, dass der Index nullbasiert ist, also die dritte Zeile als Index zwei.

1

Ich habe einen anderen Ansatz für dieses Problem mit einer for-Schleife und .eq() -Methode.

var a = 2; // start from 2 because eq() counts from 0 
var b = 3; // start from 3 because eq() counts from 0 
var total = $('.stripeMe td').length; 

for (i = 0; i <= total; i++){ 
    if (i == a){ 
     $('.stripeMe tr:eq('+a+')').css('background', 'red'); 
     a+=4; 
    } 
    else if (i == b){ 
     $('.stripeMe tr:eq('+b+')').css('background', 'blue'); 
     b+=4; 
    } 
};