jQuery :nth-child not working in IE

Question

I am using this code

$('.list-item:nth-child(5n)').after('<div class="clear"><img src="http://domain.com/image.jpg" width="780" height="80" alt="banner" /></div>')

This works fine in Firefox and Chrome but not working in IE8, IE9...

Answer 1

nth-child is not supported in IE 6-8. IE9 has support for it. See here.

See this question for a possible workaround.

Answer 2

There's actually an script that you can upload in your js folder and add some conditionals in your header and nth-child will work in IE 6, 7 and 8. you can learn more here and if you need to use rounded corners you will need to install this other script called curvycorners.js They are really time saving. Good Luck

Answer 3

The jQuery nth-child selector doesn't work in some corner cases that involve complex selectors in IE8.

Following needed to be modified in IE8.

//Works fine in IE9+, FF and Chrome. 
//dataColumn = jQuery('.table-header div.rf-edt-hdr + div table table tbody > tr:nth-child(1) td:nth-child(1)');
//headerColumn = jQuery('div.table-header > div.rf-edt-hdr table table > tbody > tr td:nth-child(1)');
dataColumn = jQuery('.table-header div.rf-edt-hdr + div table table tbody > tr').eq(0).find('td').eq(0);
headerColumn = jQuery('div.table-header > div.rf-edt-hdr table table > tbody > tr td').eq(0);

NOTE:nth-child is 1-index based. eq() is 0-index based.

Answer 4

jQuery handles nth-child in the absense of native browser support. It works just fine in IE7, 8 and 9+.

Fiddle: http://jsfiddle.net/jonathansampson/Y3MP4/

Answer 5

It sounds like there's something else amiss. Your code should work even in IE6 - though IE<9 doesn't natively support nth-child, jQuery's selector engine (Sizzle) implicitly handles it for you.

Give this code a go:

<script>
$("ul").remove();
var ul = $("<ul>");
for (var i = 1; i < 100; i++) {
  $("<li>", {
    "class" : "list-item",
    html : i
  }).appendTo(ul);
}
ul.appendTo(document.body);

$('.list-item:nth-child(5n)')
  .after('<div class="clear">Clear!</div>')
</script>

Do you see the "Clear!" remarks? Even in IE6, you should...