jQuery :nth-child 在 IE 中不工作答案

【问题标题】：jQuery :nth-child not working in IEjQuery :nth-child 在 IE 中不工作
【发布时间】：2012-06-11 20:12:05
【问题描述】：

我正在使用此代码

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

这在 Firefox 和 Chrome 中运行良好，但在 IE8、IE9 中无法运行...

【问题讨论】：

IE8 不支持AFAIK nth-child。
@pixelngrain 请为.list-item 元素发布您的HTML。同时发布您可能在控制台中看到的任何消息。
我检查并不能在 IE 中工作。不知道哪里错了

标签： jquery internet-explorer cross-browser

【解决方案1】：

nth-child 在 IE 6-8 中不受支持。 IE9 支持它。见here。

请参阅this question 了解可能的解决方法。

【讨论】：

jQuery 在没有原生浏览器支持的情况下处理 nth-child。

【解决方案2】：

听起来好像还有什么不对劲的地方。您的代码即使在 IE6 中也应该可以工作 - 尽管 IE

试试这个代码：

<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>

你看到“清除！”评论？即使在 IE6 中，您也应该...

【讨论】：

【解决方案3】：

jQuery 在没有原生浏览器支持的情况下处理nth-child。它在 IE7、8 和 9+ 中运行良好。

小提琴：http://jsfiddle.net/jonathansampson/Y3MP4/

【讨论】：

【解决方案4】：

实际上有一个脚本，您可以在 js 文件夹中上传并在标题中添加一些条件，nth-child 将在 IE 6、7 和 8 中工作。您可以了解更多信息here，如果您需要使用圆角您需要安装另一个名为 curvycorners.js 的脚本他们真的很节省时间。祝你好运

【讨论】：

【解决方案5】：

jQuery nth-child 选择器在 IE8 中涉及复杂选择器的某些极端情况下不起作用。

以下需要在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);

注意：nth-child 是基于 1-index 的。 eq() 是基于 0 索引的。

【讨论】：