2010-05-06 26 views
5

Tôi hiện đang sử dụng mã này để thêm lớp vào mọi hàng khác trong bảng của tôi.Chọn mỗi 2 hàng bảng khác với jquery

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

Tuy nhiên, trên bảng khác tôi muốn thêm một lớp học để hàng 3,4, 7,8, 11,12 và vân vân ...

Đây có phải là có thể?

+0

xin cung cấp một đoạn cấu trúc bảng! –

+2

nó một cấu trúc bảng đơn giản:

Mark

Trả lời

8

Bạn cần phải làm điều đó như thế này:

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

Sử dụng này:

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

gets different results (cụ thể là trong webkit, có thể những người khác).

+0

Điều này làm việc cho tôi, cảm ơn rất nhiều. – Mark

+0

Làm cách nào tôi có thể áp dụng một lớp css khác cho 2 hàng đầu tiên bây giờ? Cảm ơn btw! – Mark

+0

@Mark - Nếu bạn muốn chỉ là ** rất ** đầu tiên 2, thì như sau: '$ (". StripeMe tr: lt (2) "). AddClass (" otherClass ");' –

3

Với `: chọn thứ n-child': http://api.jquery.com/nth-child-selector/

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

này không làm việc :) http://jsfiddle.net/ndn67/ –

+0

Ví dụ của bạn hoạt động tốt cho tôi ... – RoToRa

+0

@RoToRa - Ope n nó trong webkit :) –

1

Bạn có thể sử dụng chức năng filter để lọc các thiết lập bất kỳ cách nào bạn thích:

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

Điều này sẽ giữ cho các mục có chỉ số 2, 3, 6, 7, 10, 11 và vân vân. Lưu ý rằng chỉ mục là 0, vì vậy hàng thứ ba là chỉ số hai.

1

Tôi đã thực hiện một cách tiếp cận khác cho vấn đề này bằng cách sử dụng vòng lặp for và phương thức .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; 
    } 
}; 

Các vấn đề liên quan