I am currently using this code to add a class to every other row in my table.
$(".stripeMe tr:even").addClass("alt");
However, on another table I'd like to add a class to rows 3,4, 7,8, 11,12 and so on...
Is this possible?
views:
171answers:
5
+3
A:
With the `:nth-child´ selector: http://api.jquery.com/nth-child-selector/
$(".stripeMe tr:nth-child(4n), .stripeMe tr:nth-child(4n-1)").addClass("alt");
RoToRa
2010-05-06 15:08:55
This doesn't work :) http://jsfiddle.net/ndn67/
Nick Craver
2010-05-06 15:11:05
Your example works fine for me...
RoToRa
2010-05-06 15:14:01
@RoToRa - Open it in webkit :)
Nick Craver
2010-05-06 15:14:49
@Nick: The results at that link look good to me, too.
BlairHippo
2010-05-06 15:16:37
@BlairHippo - Don't test in a single browser, try chrome/safari...selectors that are sometimes implemented by the browser and emulated by jquery if not present may not always have the same behavior, which is the case here.
Nick Craver
2010-05-06 15:17:35
Correct, it does not work in Chrome, is there a correction for this? thanks
Mark
2010-05-06 15:18:59
Well then jQuery is broken there. Another good reason not to use it :-)
RoToRa
2010-05-06 15:21:01
@Mark - See my answer for a cross-browser solution
Nick Craver
2010-05-06 15:22:01
@RoToRa - I don't agree at all, it's the webkit selector not working, the jQuery emulation (e.g. view it in IE) works fine....write this without jQuery, let me know how verbose that gets :)
Nick Craver
2010-05-06 15:25:31
@Nick It's not the selector. Using the selector in CSS works fine in Webkit. http://jsfiddle.net/Pd4Z3/
RoToRa
2010-05-06 15:28:58
@RoToRa - Then the problem is still in Sizzle/Webkit :)
Nick Craver
2010-05-06 15:32:45
+3
A:
You need to do it like this:
$(".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.
Using this:
$(".stripeMe tr:nth-child(4n), .stripeMe tr:nth-child(4n-1)").addClass("alt");
gets different results (namely in webkit, possibly others).
Nick Craver
2010-05-06 15:12:09
How can i apply a different css class to the first 2 rows only now? Thanks btw!
Mark
2010-05-06 15:29:53
@Mark - If you mean just the **very** first 2, then like this: `$(".stripeMe tr:lt(2)").addClass("otherClass");`
Nick Craver
2010-05-06 15:34:18
A:
You can use the filter function to filter the set any way you like:
$(".stripeMe tr")
.filter(function(i){ return (i % 4) >= 2; })
.addClass("alt");
This will keep the items with index 2, 3, 6, 7, 10, 11 and so on. Note that the index is zero based, so the third row as index two.
Guffa
2010-05-06 15:23:34
A:
just a fizz buzz like! ;-)
$('.stripeMe tr').each(function(i) {
if ( (i % 4) >= 2 )
$(this).addClass('alt');
});
keep: 3,4, 7,8 11,12
aSeptik
2010-05-06 16:15:29
A:
I made a different approach for this problem using a for loop and .eq() method.
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;
}
};
fabio
2010-05-07 03:41:07