Sélectionnez toutes les 2 lignes de table avec jquery

Question

J'utilise actuellement ce code pour ajouter une classe à chaque autre ligne de ma table.

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

Cependant, sur une autre table, je voudrais ajouter une classe aux lignes 3,4, 7,8, 11,12 et ainsi de suite ...

Est-ce possible?

Answer 1

Vous devez le faire comme ceci:

$(".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.

En utilisant ceci:

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

gets different results (à savoir dans WebKit, peut-être d'autres).

Answer 2

Avec le `: sélecteur nième child': http://api.jquery.com/nth-child-selector/

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

Answer 3

Vous pouvez utiliser la fonction filter pour filtrer l'ensemble comme vous le souhaitez:

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

Cela permet de garder les éléments avec l'index 2, 3, 6, 7, 10, 11 et ainsi de suite. Notez que l'index est basé sur zéro, donc la troisième ligne comme index deux.

Answer 4

J'ai fait une approche différente pour ce problème en utilisant une méthode for loop et .eq().

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; 
    } 
};