Nth-of-type alternative for IE8

Question

I have rows of product divs. Need to add a clear div after every fourth item. 4 to a row.

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.

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.

Anyone know a work-a-round? I havn't been able to find a solution.

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.

I took a look, it was a little above my cognitive level. I don't understand the solution. — Christopher Marshall, Jul 17 '12 at 21:27
see [this similar question](http://stackoverflow.com/questions/2093355/nth-of-type-in-jquery-sizzle) — MrOBrian, Jul 17 '12 at 21:27
@ChristopherMarshall It's an extension to jQuery's selector engine. Note: The accepted answer on the duplicate includes a link to https://github.com/keithclark/JQuery-Extended-Selectors. Even dummies should be able to read the concise documentation, and understand the simple example. — Rob W, Jul 17 '12 at 21:44
That plugin worked. Have it in a conditional and am following on github. Thanks Rob. — Christopher Marshall, Jul 17 '12 at 21:50

score 5 · Accepted Answer · answered Jul 17 '12 at 21:51

5

Ended up using https://github.com/keithclark/JQuery-Extended-Selectors in an IE conditional statement. It's working now.

answered Jul 17 '12 at 21:51

Christopher Marshall

10,678
10
55
94

1

So somebody else answered your question, but you posted a duplicate then accepted your own answer? – VoidKing May 31 '13 at 13:36
2

The guy posted that answer 5 months after I posted this one. Check the dates... – Christopher Marshall May 31 '13 at 14:40
Indeed... my apologies. – VoidKing May 31 '13 at 16:27

score 2 · Answer 2 · answered Dec 11 '12 at 10:59

2

JQuery-Extended-Selectors

It will solve your problem, it helps all css3 selector classes.

answered Dec 11 '12 at 10:59

Santosh A.

37
3

1

Yep, that's what I used. – Christopher Marshall Dec 11 '12 at 15:47

score 1 · Answer 3 · answered Jul 17 '12 at 21:26

The .filter method might be abused to work around that missing CSS3-support of jQuery:

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.

score 1 · Answer 4 · answered Jul 17 '12 at 21:33

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.

It does this using any one of several libraries, including jQuery. However it's worth noting from their home page that nth-of-type is 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.

If that doesn't work for you, an older script called IE9.js might 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-type and other CSS selectors. It also tries to fix a whole bunch of IE bugs.

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.

I can't use selectivzr for the aforementioned purpose. But I tried implementing the conditional for ie9.js. The conditional is before my domReady.js file but I'm still getting error. SCRIPT5022: Syntax error, unrecognized expression: nth-of-type jquery-1.7.2.min.js, line 3 character 15260 — Christopher Marshall, Jul 17 '12 at 21:42
IE9.js won't affect jQuery's ability to support `nth-of-type`. It would only work for selectors in your actual stylesheet. — Spudley, Jul 17 '12 at 21:47

score 0 · Answer 5 · answered Sep 28 '13 at 10:21

0

If you don't want to load a full library of selectors, check this out: https://gist.github.com/oliverbenns/6740630

answered Sep 28 '13 at 10:21

Nth-of-type alternative for IE8

5 Answers5