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

【问题标题】：jQuery nth-of-type not working in IE7 or 8jQuery nth-of-type 在 IE7 或 8 中不起作用
【发布时间】：2011-12-21 10:49:39
【问题描述】：

我已经使用以下代码在 IE7 和 8 中实现了一些 jQuery 来伪造 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，CSS 在 IE 兼容性方面失败。

谢谢

【问题讨论】：

尝试使用这个插件（添加所有“类型”选择器）：github.com/keithclark/JQuery-Extended-Selectors
同样的问题是类只添加到已经支持选择器的浏览器中，而不是实际添加到不支持选择器的浏览器中
那么这里的 sn-p 呢：stackoverflow.com/questions/2093355/…？你用的是什么版本的jQuery？
使用 1.6.4 并且它在 Chrome 中运行，所以它更像是一个 IE 问题。
嗯，很明显它只有在浏览器实际实现选择器时才有效，所以 sn-p 可能根本不起作用。

标签： jquery

【解决方案1】：

即使在 IE7 中，您的表达式也可以正常工作。

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

section 元素不是通用容器元素。当一个 element 用于样式目的或为了方便在编写脚本时，鼓励作者改用 div 元素。一种一般规则是节元素只有在元素的内容将在文档的大纲。

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

用普通的divs 替换section 元素，你会发现你的表达没有问题。

更新

有解决这个问题的方法，其中之一是使用此脚本创建每个 HTML5 元素之一，以使 IE 识别它们；

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

您可以阅读有关此here 和here 的更多信息。

【讨论】：

考虑到 IE 甚至不支持新的 HTNL5 元素（除非您使用 createElement 技巧），我怀疑 IE 不会设置它们的样式，只是因为规范是这样说的。跨度>
确实如此。其他浏览器允许这些元素设置样式有点棘手。
您看错了规格。它说，“当需要一个元素仅用于样式目的或方便编写脚本时”。这与说您根本无法设置样式不同。
@YiJiang 你说的对，我错了。感谢您纠正我。

【解决方案2】：

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

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

:nth-of-type
:nth-last-of-type
:第一类
:最后一个类型
:only-of-type

库不支持 - 原因在这里：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 :)
});

希望对你有帮助

【讨论】：

你确定你理解他的问题吗？他没有询问 jQuery 对 nth-of-type 的支持 - 他自己使用 jQuery.expr 添加选择器，如下所示：ericmmartin.com/creating-a-custom-jquery-selector
$('selector').each(function(i){ $(this).addClass('child-' + i); });
@YiJiang 是的，看来我误解了这个问题 - 我将把它留在这里，而不是删除它，因为有 cmets 并且 $.each 解决方案仍然有效。