Home/ Questions/Q 864901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T09:33:18+00:00

I have a web app where I have several elements with class=classA . I

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can try a variety of things, but IE is optimized to fetch elements by ID, nothing else (it puts elements IDs in a hashtable under the covers).

    If you’re generating your page via some server-side technology, you could determine the list of elements and then output a JavaScript array of the IDs of those elements, then when the page loads you could loop through that array and collect your elements by ID.

    That’s the approach we’ve taken with ASP.NET apps with good success, though you may be doing something else. I would at least investigate the options jmbledsoe has described, they can help a little, but I doubt you’ll get the performance you’re hoping for.

    • 0