Question

我已经使用以下代码实现了一些jQuery来伪造IE7和8中的nth-of-type：

$.expr[':']['nth-of-type'] = function(elem, i, match) {
    var parts = match[3].split("+");
    return (i + 1 - (parts[1] || 0)) % parseInt(parts[0], 10) === 0;
};
$("div>section.subcontent:nth-of-type(3)").addClass('nth-three');
$("div>section.subcontent:nth-of-type(4)").addClass('nth-four');

但它仅适用于Chrome和其他浏览器......任何想法为什么？因为JS的重点是依赖于JS在IE兼容性方面失败的JS。

由于

Answer 1

jQuery使用sizzle选择器引擎来选择DOM元素。

根据sizzle.js文档（https://github.com/jquery/sizzle/wiki/Sizzle-Home），以下选择器：

：第n的型
：第n-最后的型
：第一的型
：最后的型
：仅-的型

库不支持

- 原因在于：http://ejohn.org/blog/selectors-that-people-actually-use/

所以我只能猜测浏览器本身没有实现选择器，jQuery不会用一些聪明的js修补它。

一个更好的解决方案可能是只运行这些元素，为它们提供适当编号的类名 - 这样可以减少绒毛效果：

var c=1;
$('yourelems').each(function(){
    $(this).addClass('child-'+c);
    c++; //yes that's a pun :)
});

希望这有帮助

Answer 2

即使在IE7中，你的表达也能正常工作。

问题是IE（9之前的版本）不能很好地处理像section这样的HTML5元素。

section元素不是通用容器元素。当一个元素是出于样式目的或方便的需要编写脚本时，鼓励作者使用div元素。一个一般规则是，section元素仅适用于元素的内容将在文档中明确列出概要

来自http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

将section元素替换为普通div，您会发现表达式没有任何问题。

<强>更新

已解决此问题，其中一个是使用此脚本创建每个HTML5元素之一，以使IE了解它们;

<script>
  for(var e,l='article aside footer header nav section time'.split(' ');e=l.pop();document.createElement(e))
</script>

您可以详细了解这个here和here。

jQuery nth-of-type在IE7或8中不起作用

2 个答案: