I have a web app where I have several elements with class="classA". I want to select and apply a function to all of them. I am doing the obvious thing, which is $(".classA").each(function () { ... }). 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.
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.
-- EDIT --
Below is my tests code.
test1 uses
document.getElementById("id")and is very fast.test2 uses
$("#id")and is pretty slow.test3 uses
$(".class")and is even slower.
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.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
function test1 ()
{
var start = (new Date).getTime();
for (var i = 0; i < 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 < 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 < 10000; i++)
{
$(".test3");
}
var elapsed = (new Date).getTime() - start;
alert("test3 elapsed: " + elapsed);
}
</script>
</head>
<body>
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3" class="test3">test3 1</div>
<div id="test3" class="test3">test3 2</div>
<div id="test3" class="test3">test3 3</div>
<div id="test3" class="test3">test3 4</div>
<input type="button" onclick="test1();" value="test1" />
<input type="button" onclick="test2();" value="test2" />
<input type="button" onclick="test3();" value="test3" />
</body>
</html>