logo标签列表

IE8的Nth-of-type替代方案

javascriptjquerycssinternet-explorer-8jquery-selectors
6

我有一堆产品div。需要在每四个项目后添加一个清除的div。每行4个。

我现在正在使用jQuery('.product:nth-of-type(4n+2)').after("<div class='clear'></div>");，但这不支持IE8。由于我们正在使用jQuery，在这种情况下，selectivizr修复程序无法正常工作。

我还尝试过

            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，并将它们无论在哪里都分成四组。

有人知道解决方法吗？我一直找不到解决方案。

谢谢！

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。

我看了一下，这有点超出了我的认知水平。我不理解这个解决方案。 - Christopher Marshall
请参考这个类似问题的链接：https://dev59.com/VHI95IYBdhLWcg3w7CjL - MrOBrian
这是jQuery核心的扩展吗？O_o - Christopher Marshall
1
@ChristopherMarshall 这是jQuery选择器引擎的扩展。请注意：重复问题的被接受答案包括指向https://github.com/keithclark/JQuery-Extended-Selectors的链接。即使是新手也应该能够阅读简明的文档并理解简单的示例。 - Rob W
那个插件已经工作了。我已将其放在条件语句中，并正在Github上关注它。谢谢Rob。 - Christopher Marshall
5个回答
5
1
有人回答了你的问题，但是你又发布了一个重复的问题，然后接受了自己的答案？ - VoidKing
2
那个人在我发布这个答案5个月后才发布了他的。请检查日期... - Christopher Marshall
确实...非常抱歉。 - VoidKing
2
1
是的，那就是我用的。 - Christopher Marshall
1

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

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

虽然它模拟了nth-child，但不是nth-of-type，而且仅基于当前选定元素集合而不是基于它们在DOM中的位置。

1

如果您愿意使用JavaScript解决方案，那么我知道的最好的一个是Selectivz。它为IE添加了对许多高级CSS选择器的支持。

它使用包括jQuery在内的几个库之一来实现这一点。然而，值得注意的是，从他们的主页上可以看到，当与jQuery一起使用时，nth-of-type被提到不受支持。但是，它确实可以与MooTools、Prototype和其他库一起使用。我不知道为什么它会特别与jQuery有问题。

如果这对您没有用，一个名为IE9.js的旧脚本可能会帮助您。这是一个大型的hack，试图将许多缺失的功能添加到旧版本的IE中，包括nth-of-type和其他CSS选择器。它还试图修复许多IE的错误。

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

我无法将selectivzr用于上述目的。但是我尝试使用ie9.js实现条件语句。条件语句位于我的domReady.js文件之前，但仍然出现错误。SCRIPT5022：语法错误，无法识别表达式：nth-of-type jquery-1.7.2.min.js，第3行第15260个字符。 - Christopher Marshall
IE9.js不会影响jQuery支持nth-of-type的能力。它只适用于您实际样式表中的选择器。 - Spudley
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接