Bộ chọn IE8 và jQuery

Question

Hôm nay tôi nhận thấy rằng sự kết hợp giữa bộ chọn jQuery và hàm addClass() không hoạt động đúng trên IE8.

Ví dụ, khi tôi muốn đảm bảo rằng hàng chẵn được lựa chọn trong một bảng, tôi đã viết:

jQuery(document).ready(function($){ 
    $("#table1 tr:nth-child(even)").addClass("even"); 
} 

Và đối với CSS, tôi đã viết:

#table1 tr:nth-child(even), #table1 tr.even { 
    background-color: #ff0; 
} 

Trong Firefox , Chrome, Safari và Opera, ngay cả khi không có bộ chọn lớp giả trong tệp CSS, các hàng chẵn được chọn. Tuy nhiên, trong IE8, nó không phải là trường hợp. Các hàng không có màu nền khác.

Đây là kỳ lạ bởi vì khi tôi sử dụng:

jQuery(document).ready(function($){ 
    $("#table1 tr:nth-child(even)").css({"background-color":"#ff0"}); 
} 

Các hàng chọn được tô sáng trong IE8.

---

Ví dụ về vấn đề là câu hỏi có thể xem tại đây - 24ways example. Trong Firefox, Chrome, Safari và Opera, các hàng lẻ được gán một lớp "lẻ". Tuy nhiên, trong IE8, chúng không được gán một lớp "lẻ" và không được đánh dấu.

Answer 1

Bộ chọn làm việc một cách chính xác về phía jQuery ... nhưng IE8 loại bỏ các quy tắc phong cách hoàn toàn (phù hợp với the specification) vì nó không nhận ra nth-child:

tr:nth-child(odd) td, tr.odd td { 
    background-color: #86B486; 
} 

Nếu bạn chia nó, nó' ll làm việc một cách chính xác:

tr:nth-child(odd) td { 
    background-color: #86B486; 
} 
tr.odd td { 
    background-color: #86B486; 
} 

Here's the original version (một quy tắc đơn IE8 loại bỏ) và here's a fixed sample, với sự chia rẽ quy tắc.

---

Vì tính đầy đủ, đảo ngược quy tắc like thiskhông giúp đỡ:

tr.odd td, tr:nth-child(odd) td { 
    background-color: #86B486; 
} 

Answer 2

làm việc này cho tôi trong IE8 và IE9 đầu tiên bạn cần 2 lớp với background-color

.even { background-color: white; } 
.odd { background-color: #ff0; } 

sau đó với jquery tìm tr: lẻ add tr: thậm chí và thêm lớp tương ứng

$(document).ready(function() { 
     $('#table1').find('tr:odd').addClass("odd"); 
     $('#table1').find('tr:even').addClass("even"); 
});