gruss Stefan,
Eine Kategorie hat von 2- 1000 Artikel, die allesamt in einer Liste angezeigt werden.
Nun möchte ich diese Liste auf Bezeichnung filtern ...
... bei mehr als 300 Artikeln stirbt aber der Browser komplett ab.
ein grobes schema koennte folgendermassen aussehen.
- ideal waere es, ueber native DOM-methoden einmalig die referenz auf
die entsprechende knotenliste (LiveNodeList) holen zu koennen.
z.b.:
var liveNodeList = document
.getElementById("listIndentifier")
.getElementsByTagName("li")
;
-
durch die liste iterieren und jeden knoten, der dem filterkriterium/
den filterkriterien entspricht, aus dem DOM-Baum entfernen und in
einem array parken. -
nochmals durch die jetzt hoffentlich reduzierte knotenliste iterieren
und alle zurueckgebliebenen knoten durch geeignete massnahmen visuell
ausblenden. -
das array mit den geparkten knoten mit entsprechender sortierfunktion
auf-/absteigend nach preis sortieren. -
sortiertes array entleeren, dabei die visuelle sichtbarkeit der knoten
gewaehrleisten/wiederherstellen und diese in der jetzt richtigen
reihenfolge wieder in das DOM haengen.
ideale voraussetzung fuer diesen ansatz ist natuerlich ein sauber
strukturiertes HTML. der gesamte prozess duerfte fast ausschliesslich
mit JavaScript 1.5 und nativen DOM-Methoden zu bewaeltigen sein.
und ja ich mag jQuery; aus performance-gruenden bevorzuge ich bei solchen
aktionen aber den direkten weg - beispielsweise so:
<ul id="searchResults">
<li data-refinements="filter0 filter1 filter2">...</li>
<li data-refinements="filter0 filter4 filter7">...</li>
<li data-refinements="filter2 filter4 filter9">...</li>
</ul>
var
elmResultList = document.getElementById("searchResults"),
liveResultList = elmResultList.getElementsByTagName("li")
;
var elm, arr = [], idx = liveResultList.length;
while (idx) {
elm = liveResultList[--idx];
// Deine Filterfunktion - Deine aktuell gueltigen Filterkriterien.
if (hasRefinements(jQuery(elm).data("refinements"), currentRefinements)) {
arr.push(elmResultList.removeChild(elm));
}
}
idx = liveResultList.length;
while (idx) {
elm = liveResultList[--idx];
// [elm] ausblenden.
}
arr.sort(function (a, b) {
// Dein Sortierkriterium.
return 0; // 1, -1
});
while (elm = arr.unshift()) {
elmResultList.appendChild(elm);
}
so long - peterS. - pseliger@gmx.net
»Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - Douglas Crockford
ie:( fl:) br:> va:( ls:& fo:) rl:) n3;} n4:} ss:} de:µ js:} mo:? zu:]