Elemente mit jQuery nach Attributen alphabetisch sortieren

pWorker · 11. Januar 2017 13:24

Moin,

falls ihr mal ein Firmenverzeichnis oder eine andere Auflistung alphabetisch nach bestimmten Parametern sortieren wollt,
braucht es nur ein wenig jQuery für diese browserübergreifend funktionierende Lösung.

Zunächst findet die Ausgabe der Elemente statt (bei mir auf Searchresultseite ->ul id="suchergebnisslides"->li element-> Div-Boxen class="verzeichnisseg" -> <a> Texte beginnend mit Firmenname).

Beispiel:

Hier klicken, um den Code zum Kopieren zu markieren

<ul id="suchergebnisslides">
...

<li>

<div class="two-column verzeichnisseg">
<a href="#">
{$firmenname}<br />
{$ort}<br />
{$strasse}<br />
</a>
</div>

{*weitere 19 div Boxen*}

</li>

...

</ul>

Nun will ich diese bei der Anzeige nach dem Firmennamen sortieren lassen. Da der Firmenname im Linktext an erster Stelle kommt, kann ich also die Links miteinander vergleichen (um das auch sinnvoll hinzubekommmen, müssen jeweils die ersten Buchstaben alle entweder groß- oder kleingeschrieben verglichen werden).

Hier klicken, um den Code zum Kopieren zu markieren

$(document).ready(function() {

var $divs = $("div.verzeichnisseg");

var alphabeticallyOrderedDivs = $divs.sort(function (a, b) {
        return $(a).find("a").text().toUpperCase().localeCompare($(b).find("a").text().toUpperCase());

 });


var loocontrol = alphabeticallyOrderedDivs.length;

console.log(loocontrol, "Count");
console.log(alphabeticallyOrderedDivs, "Abc");

var list1 = $(alphabeticallyOrderedDivs).slice(0,20);
var list2 = $(alphabeticallyOrderedDivs).slice(20,40);
var list3 = $(alphabeticallyOrderedDivs).slice(40,60);
var list4 = $(alphabeticallyOrderedDivs).slice(60,80);
var list5 = $(alphabeticallyOrderedDivs).slice(80,100);

var $li = $('<li></li>');
var $lo = $('<li></li>');
var $la = $('<li></li>');
var $lu = $('<li></li>');
var $le = $('<li></li>');

$('#suchergebnisslides').empty();

$(".custom-navigation").hide();

if (loocontrol > 0) {
   $( "#suchergebnisslides").append($li.html(list1));
} ;
if (loocontrol > 20) {
$(".custom-navigation").show();
   $( "#suchergebnisslides").append($lo.html(list2));
}; 
if (loocontrol > 40) {
   $( "#suchergebnisslides").append($la.html(list3));
};
if (loocontrol > 60) {
   $( "#suchergebnisslides").append($lu.html(list4));
};
if (loocontrol > 80) {
   $( "#suchergebnisslides").append($le.html(list5));
};


});

Zunächst wird die Variable mit der Div Box Klasse erstellt.

Als nächstes wird das a-Attribut der Div Boxen verglichen und es wird eine für alle Browser verständliche Antwort ausgegeben (0,1,-1).

Die Variable loocontrol enthält die Anzahl an Div Boxen.
(Um zu sehen ob alles korrekt sortiert worden ist, lasse ich mir das log anzeigen)

Als nächstes zerschneide .slice() ich die alphabetisierte Ausgabe $(alphabeticallyOrderedDivs) in 20er Pakete.

Dann lege ich Formelemente an um die Div Boxen in die gewünschte Klasse (hier <li>) zu packen (das geht bestimmt eleganter...)

Als nächstes lösche ich alle bestehenden Einträge der Liste $('#suchergebnisslides').empty();
Verstecke standardmäßig meine Navigation und kontroliere im folgenden die Ausgabe der Suchergebnisse über deren Anzahl. Falls mehr als 20 Einträge vorhanden sind, wird die Navigation eingeblendet und das nächste Listenelement $( "#suchergebnisslides").append($lo.html(list2)); hinzugefügt.

Und schon hat man eine nach Firmennamen sortierte Liste. Man kann natürlich auch span ids vergeben und dann lediglich den Inhalt dieser spans vergleichen lassen, aber das Prinzip wird so auf jeden Fall deutlich.
MfG

mike-r · 12. Januar 2017 01:19

Ich erinnere mich blass an nen 2-Zweiler, der das ohne den ganzen Bloat macht. Problem: da das ganze Web das ganze Web mit Megabytefetten Frameworks überschüttet, finde ich das spontan nicht., recherchiere morgen nochmal, wie man sowas früher™ in schön, sparsam und sinnvoll gemacht hat.

pWorker · 12. Januar 2017 10:57

Mhh... weiß ich nicht, ich such immer nach Lösungen für bestimmte Probleme und keine spezielle Methode das zu erreichen. Was mir allerdings aufgefallen ist, viele Lösungen von früher, gerade aus Foreneinträgen zu cmsms, führen zu Browserproblemen oder blank page errors oder Versionsfehlern oder "Ein Update folgt bald...". Diese Lösung ist jetzt von stackoverflow und leicht abgewandelt, aber sie funktioniert. Der 2 Zeiler würd mich mal interessieren.

Andynium · 13. Januar 2017 18:21

Danke für dein weiteres HowTo - ist das das Ergebnis deiner Arbeit zu diesem Thema?

https://www.cmsmadesimple.de/forum/view … hp?id=4966

mike-r · 13. Januar 2017 19:14

pWorker schrieb:

Der 2 Zeiler würd mich mal interessieren.

Hab ich nicht wieder gefunden (vlt. auch falsch erinnert).
Diverse 10kb-Dinger gibt das Netz her, wenn man nach sortable.js sucht.

Forum für CMS/made simple

#1 11. Januar 2017 13:24

Elemente mit jQuery nach Attributen alphabetisch sortieren

#2 12. Januar 2017 01:19

Re: Elemente mit jQuery nach Attributen alphabetisch sortieren

#3 12. Januar 2017 10:57

Re: Elemente mit jQuery nach Attributen alphabetisch sortieren

#4 13. Januar 2017 18:21

Re: Elemente mit jQuery nach Attributen alphabetisch sortieren

#5 13. Januar 2017 19:14

Re: Elemente mit jQuery nach Attributen alphabetisch sortieren

Fußzeile des Forums