title: Nth-of-type alternative for IE8
body: <p>I have rows of product divs. Need to add a clear div after every fourth item. 4 to a row. </p>
  
  <p>I'm using <code>jQuery('.product:nth-of-type(4n+2)').after("&lt;div class='clear'&gt;&lt;/div&gt;");</code> right now, but that doesn't support IE8. And since we're using jQuery, selectivizrs fix won't work in this case.</p>
  
  <p>I've also tried </p>
  
  <pre><code>            addDynamicRow = function() {
              var divs = $(".product-section &gt; .product");
              for(var i = 0; i &lt; divs.length; i+=4) {
                divs.slice(i, i+4).wrapAll("&lt;div class='row'&gt;&lt;/div&gt;");
              }  
  
              $('.row').after("&lt;div class='clear'&gt;&lt;/div&gt;")   
          }
  
          addDynamicRow();
  </code></pre>
  
  <p>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.</p>
  
  <p>Anyone know a work-a-round? I havn't been able to find a solution.</p>
  
  <p>Thanks!</p>
  
  <p><strong>1/15/13 Update:</strong> 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.</p>