Каков наилучший способ поддержки `nth-child` одним выстрелом для всех версий IE?

Question

Каков наилучший способ поддержки nth-child одним выстрелом для всех версий IE?

Я хочу придать стиль так. для некоторых конкретных страниц.

#products tr:nth-child(even) {
  background-color: red;
}


#products tr:nth-child(odd) {
  background-color: white;
}

Answer 1

Вы можете сделать это в JavaScript.

var table = document.getElementById('products');

var rows = table.getElementsByTagName('tr');

for (var i = 0; i < rows.length; ++i)
{
   if ( (i % 2) == 0 )
   {
       rows[i].className = 'even';
   }
}

тогда сделайте свой CSS следующим образом:

#products tr td
{
    background-color: white;
}

#products tr.even td
{
    background-color: red;
}

Если бы вы использовали библиотеку javascript, вы могли бы сделать это:

$('#products tr:even').addClass('even');

Answer 2

Я сделал что-то, что должно работать в любом браузере: https://gist.github.com/yckart/5652296

var nthChild = function (elem, num) {
    var len = elem.length;
    var ret = [];

    // :nth-child(num)
    if (!isNaN(Number(num))) {
        for (var i = 0; i < len; i++) {
            if (i === num - 1) return elem[i];
        }
    }

    // :nth-child(numn+num)
    if (num.indexOf("+") > 0) {
        var parts = num.match(/\w/g);
        for (var i = parts[2] - 1; i < len; i += parts[0] << 0) {
            if (elem[i]) ret.push(elem[i]);
        }
    }

    // :nth-child(odd)
    if (num === "odd") {
        for (var i = 0; i < len; i += 2) {
            ret.push(elem[i]);
        }
    }

    // :nth-child(even)
    if (num === "even") {
        for (var i = 1; i < len; i += 2) {
            ret.push(elem[i]);
        }
    }

    return ret;
};


var rows = document.getElementsByTagName('li');
var num = nthChild(rows, 2);
var formula = nthChild(rows, "3n+1");
var even = nthChild(rows, "even");
var odd = nthChild(rows, "odd");


// Note, forEach needs to be polyfilled for oldIE
even.forEach(function (li) {
    li.className += " even";
});

odd.forEach(function (li) {
    li.className += " odd";
});

formula.forEach(function (li) {
    li.className += " formula";
});

num.style.backgroundColor = "black";

Answer 3

Этот проект предоставляет вам "нативную" поддержку этих и многих других селекторов CSS3 как минимум для IE7 / 8.

Но здесь у вас возникнет проблема с IE7, который не поддерживает background-color для tr.

Answer 4

Вы можете сделать это и в jQuery, и они, вероятно, решат вашу кросс-браузерную проблему.

$('#products').children('tr:even').css('background-color', 'red');
$('#products').children('tr:odd').css('background-color', 'white');