Question

我有一系列产品div。需要在每四个项目后添加一个明确的div。 4连续。

我现在正在使用jQuery('.product:nth-of-type(4n+2)').after("<div class='clear'></div>");，但这不支持IE8。由于我们使用的是jQuery，因此选择性修复程序在这种情况下不起作用。

我也试过

            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();

但是，它也会抓住其他产品部分包装中的所有产品div，并将它们分成四个一组，无论它们在哪里。

任何人都知道一轮工作？我找不到解决办法。

谢谢！

1/15/13更新： 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。

Answer 1

在IE条件语句中使用https://github.com/keithclark/JQuery-Extended-Selectors结束。它现在正在运作。

Answer 2

JQuery-Extended-Selectors

它将解决您的问题，它有助于所有css3选择器类。

Answer 3

.filter method可能会被滥用来解决jQuery缺少CSS3支持的问题：

jQuery('.product').filter(function(i){return i%4==2;})

虽然它模仿nth-child，而不是nth-of-type，并且仅模仿当前所选元素集，而不是基于其DOM位置。

Answer 4

如果您愿意使用javascript解决方案，那么我所知道的最好的解决方案是Selectivz。它为一大堆高级CSS选择器增加了对IE的支持。

它使用几个库中的任何一个来完成此操作，包括jQuery。但是值得注意的是，从他们的主页中可以看出nth-of-type与jQuery一起使用时不被支持。它可以与MooTools，Prototype和其他库一起使用。我不知道为什么它有特殊的jQuery问题。

如果这对您不起作用，则名为IE9.js的旧脚本可能会对您有所帮助。这是一个很大的黑客，试图在旧版本的IE中添加一大堆缺少的功能，包括nth-of-type和其他CSS选择器。它还试图解决一大堆IE漏洞。

这些库中的任何一个都可能适合您，并允许您使用高级CSS选择器而不必担心旧版本的IE。给他们一个机会。

Answer 5

如果您不想加载完整的选择器库，请查看：https://gist.github.com/oliverbenns/6740630

IE8的第N种替代方案

5 个答案: