Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 11.01.2017 13:24

pWorker
probiert CMSMS aus
Registriert: 20.10.2016
Beiträge: 80

Elemente mit jQuery nach Attributen alphabetisch sortieren

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:

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


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

Offline

#2 12.01.2017 01:19

mike-r
CMSMS-Profi
Registriert: 21.12.2010
Beiträge: 898
Webseite

Re: Elemente mit jQuery nach Attributen alphabetisch sortieren

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.


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#3 12.01.2017 10:57

pWorker
probiert CMSMS aus
Registriert: 20.10.2016
Beiträge: 80

Re: Elemente mit jQuery nach Attributen alphabetisch sortieren

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.

Offline

#4 13.01.2017 18:21

cyberman
Moderator
Ort: Dohna / Sachsen
Registriert: 13.09.2010
Beiträge: 6.687
Webseite

Re: Elemente mit jQuery nach Attributen alphabetisch sortieren

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

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


1. Wie bekomme ich hier schnelle Hilfe?
2. HowTo: Fehlersuche bei CMSMS
---
„First they ignore you, then they laugh at you, then they fight you, then you win.“ Mahatma Ghandi

Offline

#5 13.01.2017 19:14

mike-r
CMSMS-Profi
Registriert: 21.12.2010
Beiträge: 898
Webseite

Re: Elemente mit jQuery nach Attributen alphabetisch sortieren

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.


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline