Elemente sortieren

[blabla333]

Gibt es die Möglichkeit per JavaScript Elemente zu sortieren?

Die Ergebnisse einer Suchfunktion werden bei mir als div ausgegeben. Dabei wird in der Klasse angegeben welcher Kategorie sie zugehören. Per JavaScript - am liebsten per JQuery - möchte ich es nun so einrichten, dass die Elemente mit Hilfe der Kategorie gruppiert werden. Zudem sollte der User die Möglichkeit haben einzelne Kategorien und damit auch die entsprechenden Suchergebnisse auszublenden.

z.B.

<div class="entry kurzgeschichten">Ergebnis 1</div>
<div class="entry biografien">Ergebnis 2</div>
<div class="entry kurzgeschichten">Ergebnis 3</div>
<div class="entry kurzgeschichten">Ergebnis 4</div>
<div class="entry biografien">Ergebnis 5</div>
<div class="entry artikel">Ergebnis 6</div>
<div class="entry artikel">Ergebnis 7</div>

Dies sollte dann umgewandelt werden zu:

<h2>Biografien</h2>
<div class="entry biografien">Ergebnis 2</div>
<div class="entry biografien">Ergebnis 5</div>
<h2>Kurzgeschichten</h2>
<div class="entry kurzgeschichten">Ergebnis 1</div>
<div class="entry kurzgeschichten">Ergebnis 3</div>
<div class="entry kurzgeschichten">Ergebnis 4</div>
<h2>Artikel</h2>
<div class="entry artikel">Ergebnis 6</div>
<div class="entry artikel">Ergebnis 7</div>

 

[ge_fabian]

wo kommen denn die Daten her? Aus einer Datenbank?
Liest du sie mit PHP aus?

Weil dann könntest du das doch schon bei der Ausgabe gruppieren, oder habe ich etwas überlesen?

 

[blabla333]

Grundsätzlich hast du ja Recht. Daran habe ich auch schon gedacht und es wäre definitiv die bessere Lösung!
Ich verwende das "Relevanssi"-Plugin für Wordpress. Und ehrlich gesagt scheint es mir sehr schwer die Ausgabe entsprechend zu verändern (ich finde einfach nicht die Stelle, die ich verändern muss), so dass ich als Notlösung eben daran gedacht habe einfach die Ergebnisse, so wie ich sie jetzt habe, zu verändern. Die aktuelle Ausgabe ist nach "Relevanz" geordnet. Das soll natürlich bestehen bleiben.

 

[Tronjer]

Hmm, ....

Ich würde als erstes von allen Elementen die Klasse .entry entfernen, und mir anschließend ein assoziatives Array bauen, bei dem die Klassennamen (.kurzgeschichten, ...) die Keys und das innerHTML die Values bilden. Im nächsten Schritt wird der obsolete Code mit remove() aus dem DOM gelöscht.

Danach die <h2> Tags bauen:

$.each( meinArray, function( key, value ) {
  var key = key.charAt(0).toUpperCase() + key.slice(1);
  $('#einDiv')append('<h2>" + key + "</h2>');
});

Anschließend die keys des Arrays gegen die Titel matchen und bei true den entsprechenden value wieder als Div anhängen

$(h2).append('<div class="entry ' + key +'">' + value + '</div>')