Sélecteurs IE8 et jQuery

Question

Aujourd'hui, j'ai appris qu'une combinaison de sélecteurs jQuery et de la fonction addClass() ne fonctionnait pas correctement sur IE8.

Par exemple, quand je veux faire en sorte que les lignes paires sont sélectionnées dans une table, j'ai écrit:

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

Et pour le CSS, j'ai écrit:

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

Dans Firefox , Chrome, Safari et Opera, même sans le sélecteur de pseudo-classe dans le fichier CSS, les lignes paires sont sélectionnées. Cependant, dans IE8, ce n'est pas le cas. Les lignes n'ont pas une couleur d'arrière-plan différente.

C'est bizarre parce que quand je:

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

Les lignes sélectionnées sont mises en évidence dans IE8.

---

Un exemple du problème est question peut être vu ici - 24ways example. Dans Firefox, Chrome, Safari et Opera, les lignes impaires sont assignées à une classe "impaire". Cependant, dans IE8, ils ne sont pas assignés à une classe "impaire" et ne sont pas mis en surbrillance.

Answer 1

Le sélecteur fonctionne correctement sur le côté jQuery ... mais IE8 rejette la règle de style tout à fait (en conformité avec the specification) parce qu'il ne reconnaît pas nth-child:

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

Si vous divisez, il » correctement le travail ll:

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

Here's the original version (une seule règle IE8 supprime) et here's a fixed sample, avec la scission de la règle.

---

Par souci d'exhaustivité, inversant la règle like thisne le fait pas aide:

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

Answer 2

cela fonctionne pour moi dans IE8 et IE9 vous devez d'abord 2 classes avec l'arrière-plan de couleur

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

puis avec jquery trouver tr: impair ajouter tr: pair et ajouter la classe correspondante

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