javascript IE8 的 Nth-of-type 替代方案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11531070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nth-of-type alternative for IE8
提问by Christopher Marshall
I have rows of product divs. Need to add a clear div after every fourth item. 4 to a row.
我有一排产品div。需要在每第四个项目后添加一个清晰的 div。4 排。
I'm using jQuery('.product:nth-of-type(4n+2)').after("<div class='clear'></div>");right now, but that doesn't support IE8. And since we're using jQuery, selectivizrs fix won't work in this case.
我现在正在使用jQuery('.product:nth-of-type(4n+2)').after("<div class='clear'></div>");，但不支持IE8。由于我们使用的是 jQuery，因此在这种情况下，selectivizrs 修复将不起作用。
I've also tried
我也试过
addDynamicRow = function() {
var divs = $(".product-section > .product");
for(var i = 0; i < divs.length; i+=4) {
divs.slice(i, i+4).wrapAll("<div class='row'></div>");
}
$('.row').after("<div class='clear'></div>")
}
addDynamicRow();
But that grabs all of the product divs in the other product-section wrappers as well and puts them into groups of four regardless of where they're at.
但这也会抓取其他产品部分包装器中的所有产品 div，并将它们分成四组，无论它们位于何处。
Anyone know a work-a-round? I havn't been able to find a solution.
有谁知道一个work-a-round？我一直无法找到解决方案。
Thanks!
谢谢！
1/15/13 Update:jQuery 1.9 now supports the following CSS3 selectors across all browsers, all the way back to IE6: :nth-last-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type, :target, :root, and :lang.
2013 年 1 月 15 日更新：jQuery 1.9 现在支持以下所有浏览器的 CSS3 选择器，一直回到 IE6: :nth-last-child, :nth-of-type, :nth-last-of-type, : first-of-type、:last-of-type、:only-of-type、:target、:root 和 :lang。
采纳答案by Christopher Marshall
Ended up using https://github.com/keithclark/JQuery-Extended-Selectorsin an IE conditional statement. It's working now.
最终在 IE 条件语句中使用了https://github.com/keithclark/JQuery-Extended-Selectors。它现在正在工作。
回答by Santosh A.
It will solve your problem, it helps all css3 selector classes.
它将解决您的问题，它有助于所有 css3 选择器类。
回答by Bergi
The .filtermethodmight be abused to work around that missing CSS3-support of jQuery:
该.filter方法可能会被滥用来解决 jQuery 缺少 CSS3 支持的问题：
jQuery('.product').filter(function(i){return i%4==2;})
although that emulates nth-child, not nth-of-type, and only in the current set of selected elements instead of being based on their DOM position.
尽管那模拟nth-child， 不是nth-of-type，并且仅在当前选定元素的集合中而不是基于它们的 DOM 位置。
回答by Spudley
If you're happy to use a javascript solution, then the best one I know of is Selectivz. It adds support to IE for a whole bunch of advanced CSS selectors.
如果您乐于使用 javascript 解决方案，那么我所知道的最好的解决方案是Selectivz。它为 IE 增加了对一大堆高级 CSS 选择器的支持。
It does this using any one of several libraries, including jQuery. However it's worth noting from their home page that nth-of-typeis mentioned as not being supported when used in conjunction with jQuery. It does work with MooTools, Prototype, and other libraries though. I don't know why it has a problem with jQuery specifically.
它使用多个库中的任何一个来实现这一点，包括 jQuery。但是值得注意的是，他们的主页nth-of-type提到与 jQuery 结合使用时不受支持。不过，它确实适用于 MooTools、Prototype 和其他库。我不知道为什么它特别与 jQuery 有问题。
If that doesn't work for you, an older script called IE9.jsmight help you. This is a big hack that tries to add a whole bunch of missing functionality into older versions of IE, including nth-of-typeand other CSS selectors. It also tries to fix a whole bunch of IE bugs.
如果这对您不起作用，一个名为IE9.js的旧脚本可能会对您有所帮助。这是一个很大的 hack，它试图将一大堆缺失的功能添加到旧版本的 IE 中，包括nth-of-type和其他 CSS 选择器。它还试图修复一大堆 IE 错误。
Either of these libraries may work for you, and allow you to use advanced CSS selectors without worrying about old versions of IE. Give them a go.
这些库中的任何一个都可能适合您，并允许您使用高级 CSS 选择器而不必担心旧版本的 IE。给他们一个机会。
回答by Spudley
If you don't want to load a full library of selectors, check this out: https://gist.github.com/oliverbenns/6740630
如果您不想加载完整的选择器库，请查看：https: //gist.github.com/oliverbenns/6740630
