JQuery.toggle () is extremely slow for many <TR> elements

Question

I have a table like this:

<table>
    <tr class="a"><td></td></tr>
    <tr class="b"><td></td></tr>
</table>

There are about 800 lines and most of them are class a. Now I want to switch these lines as follows:

    $("#toggle_a").click(function(){
        $("tr.a").toggle();
    });
    $("#toggle_b").click(function(){
        $("tr.b").toggle();
    });

But it is really very slow, and most of the time the browser wants to stop the action.

Does anyone have an idea how to make this thing faster and more useful?

Answer 1

It seems like a jquery search element by class name.

Note. The class selector is among the slowest selectors in jQuery; in IE, it loops through the entire DOM. Avoid using it whenever possible.

Also check out this article

Answer 2

, , 200.

.hide() .show(), .

Answer 3

, .

Browsers are known to be slow when you have very large tables (due to the complexity of the rendering tables). And with such a change, quite a few redevelopments will occur.

Answer 4

Instead of using the table structure, use the LI tag. This will speed up the html rendering process.

<UL style="padding: 0; list-style-type: none;">
    <LI class="a">1</LI>
    <LI class="b">2</LI>
    <LI>3</LI>
    <LI>4</LI>
</UL>

Now you can write a selector. It will definitely be an improvement.