Nth-of-type alternative for IE8 [duplicate]

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.

Answer 1

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

Answer 2

JQuery-Extended-Selectors

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