Селекторы IE8 и jQuery

Question

Сегодня мне стало известно, что комбинация селекторов jQuery и функции addClass () не работает должным образом в IE8.

Например, когда я хочу убедиться, что строки с четными номерами выбраны втаблицу, которую я написал:

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

А для CSS я написал:

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

В Firefox, Chrome, Safari и Opera даже без селектора псевдокласса вCSS-файл, четные строки выбираются.Однако в IE8 это не так.Строки не имеют другого цвета фона.

Это странно, потому что когда я использовал:

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

Выбранные строки подсвечиваются в IE8.

---

Примером проблемы является вопрос можно посмотреть здесь - 24ways пример .В Firefox, Chrome, Safari и Opera нечетным строкам присваивается «нечетный» класс.Однако в IE8 им не присвоен «нечетный» класс и они не выделены.

Answer 1

Селектор работает правильно на стороне jQuery ... но IE8 полностью отбрасывает правило стиля (в соответствии с спецификацией ), потому что он не распознает nth-child:

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

Если вы разделите его, он будет работать правильно:

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

Вот исходная версия (единственное правило, которое IE8 удаляет), а - это фиксированный пример с разделением правила.

---

Ради полноты, изменив правило вот так не справка:

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

Answer 2

это работает для меня в ie8 и ie9 сначала вам нужно 2 класса с цветом фона

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

затем с помощью jquery найдите tr: odd, добавьте tr: even и добавьте соответствующий класс

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