jQuery.toggle() extrem langsam auf vielen <TR> Elemente

Ich habe eine Tabelle wie folgt aus:jQuery.toggle() extrem langsam auf vielen <TR> Elemente

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

Es gibt fast 800 Zeilen und die meisten von ihnen der Klasse ein. Jetzt möchte ich diese Zeilen wie folgt wechseln:

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

Aber das ist wirklich extrem langsam und die meiste Zeit der Browser will die Aktion stoppen.

Hat jemand eine Idee, wie man dieses Ding schneller und brauchbarer macht?

Quelle

2010-12-20 adnek

Scheint da jquery Elementname nach Klasse der Suche ..

Hinweis: Die Auswahlklasse gehört zu den langsamste Wähler in jQuery; in IE es Schleifen durch das gesamte DOM. Vermeiden Sie , wann immer es möglich ist.

Auch this Artikel überprüfen

Quelle

2010-12-20 10:53:54

Dies ist nicht das Problem wirklich, es ist der Reflow der Tabelle :) –

ja ich weiß, aber wie mehrere Zeilen anstelle von Klassen aufrufen? – adnek

Sie können jede Anweisung verwenden, und bind klicken Sie einmal document.ready. Aber einige erfahrene Jungs schlagen vor, den Tisch zu ersetzen. –

Sie keine Tabellen verwenden, wenn Sie nicht tabellarischen Daten angezeigt werden.

Browser sind notorisch langsam, wenn Sie sehr große Tabellen haben (aufgrund der Komplexität in den Tabellen). Und bei dieser Art von Veränderung würde ziemlich viel Reflow passieren.

Quelle

2010-12-20 10:54:54 Oded

tatsächlich verwende ich echte Tabellendaten, so gibt es keine Umgehungsmöglichkeit – adnek

@adenk - Betrachten Sie kleinere Tabellen. 800 Zeilen sind nicht benutzerfreundlich, vielleicht würde ein dynamischer Ansatz helfen. Zeige 40 Zeilen gleichzeitig, füge Paging hinzu, verwende vielleicht AJAX, um die Tabelle zu füllen. – Oded

Verwenden Sie anstelle der Tabellenstruktur das LI-Tag. Es wird den HTML-Render-Prozess beschleunigen.

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

Jetzt können Sie den Selektor auf diese schreiben. Dies wird auf jeden Fall eine Verbesserung

Quelle

2010-12-20 11:45:56 Karan

Ich hatte ein ähnliches Problem, aber mit wenigen Zeilen, etwa 200.

I verwendet .Hide() und .show() und jetzt diese fast augenblicklich.

Quelle

2013-07-24 21:02:16 Richard

Diese Lösung funktionierte perfekt und erlaubte es mir zu vermeiden, dass ich von einem Tabellenlayout abweichen musste (es handelt sich um Tabellendaten). – Susan

Arbeitete gut für mich auch. Ich denke, toggle() verwendet viel mehr Verarbeitung als eine einfache switch-Anweisung. –

jQuery.toggle() extrem langsam auf vielen <TR> Elemente

Antwort

Verwandte Themen