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.

Solution 1

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

Solution 2

JQuery-Extended-Selectors

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

Solution 3

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.

Solution 4

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.

View more solutions