title: Jquery selectors by CSS class in IE is really slow--workarounds?
body: <p>I have a web app where I have several elements with <code>class="classA"</code>. I want to select and apply a function to all of them. I am doing the obvious thing, which is <code>$(".classA").each(function () { ... })</code>. This works just fine in Chrome/Safari/Firefox but is really slow in IE. It turns out IE has serious performance issues when selecting things by CSS class in jQuery.</p>
  
  <p>I was wondering if anyone has suggestions on good ways to deal with this. I can't use ID selectors because there can be multiple DOM elements I want to select.</p>
  
  <p>-- EDIT --</p>
  
  <p>Below is my tests code.</p>
  
  <ul>
  <li><p>test1 uses <code>document.getElementById("id")</code> and is very fast.</p></li>
  <li><p>test2 uses <code>$("#id")</code> and is pretty slow.</p></li>
  <li><p>test3 uses <code>$(".class")</code> and is even slower.</p></li>
  </ul>
  
  <p>As far as I can tell, there is no native implementation of document.getElementsByClassName in IE8--I get an error when I try to use it.</p>
  
  <pre><code>&lt;html&gt;
  
      &lt;head&gt;
          &lt;script type="text/javascript" src="jquery-1.4.2.js"&gt;&lt;/script&gt;
  
  
          &lt;script type="text/javascript"&gt;
  
  
              function test1 ()
              {
                  var start = (new Date).getTime();
                  for (var i = 0; i &lt; 10000; i++)
                  {
                      document.getElementById("test1");
                  }
                  var elapsed = (new Date).getTime() - start;
                  alert("test1 elapsed: " + elapsed);
              }
  
              function test2 ()
              {
                  var start = (new Date).getTime();
                  for (var i = 0; i &lt; 10000; i++)
                  {
                      var x = $("#test2");
                  }
                  var elapsed = (new Date).getTime() - start;
                  alert("test2 elapsed: " + elapsed);
              }
  
              function test3 ()
              {
                  var start = (new Date).getTime();
                  for (var i = 0; i &lt; 10000; i++)
                  {
                      $(".test3");
                  }
                  var elapsed = (new Date).getTime() - start;
                  alert("test3 elapsed: " + elapsed);
              }
  
          &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div id="test1"&gt;test1&lt;/div&gt;
  
          &lt;div id="test2"&gt;test2&lt;/div&gt;
  
          &lt;div id="test3" class="test3"&gt;test3 1&lt;/div&gt;
          &lt;div id="test3" class="test3"&gt;test3 2&lt;/div&gt;
          &lt;div id="test3" class="test3"&gt;test3 3&lt;/div&gt;
          &lt;div id="test3" class="test3"&gt;test3 4&lt;/div&gt;
  
          &lt;input type="button" onclick="test1();" value="test1" /&gt;
          &lt;input type="button" onclick="test2();" value="test2" /&gt;
          &lt;input type="button" onclick="test3();" value="test3" /&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>