6

我有一排产品div。需要在每第四个项目之后添加一个清晰的 div。4到一排。

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

我也试过

            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, :第一个类型、:last-of-type、:only-of-type、:target、:root 和 :lang。

4

5 回答 5

5

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

于 2012-07-17T21:51:12.737 回答
2

JQuery 扩展选择器

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

于 2012-12-11T10:59:49.947 回答
1

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

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

尽管这模拟了nth-child, 不是nth-of-type, 并且仅在当前一组选定的元素中而不是基于它们的 DOM 位置。

于 2012-07-17T21:26:36.320 回答
1

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

它使用几个库中的任何一个来执行此操作，包括 jQuery。然而值得注意的是，他们的主页nth-of-type提到与 jQuery 结合使用时不受支持。不过，它确实适用于 MooTools、Prototype 和其他库。我不知道为什么它特别与 jQuery 有问题。

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

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

于 2012-07-17T21:33:04.350 回答
0

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

于 2013-09-28T10:21:59.427 回答