jQuery: Listenelemente nach x Elementen umbrechen
Während eines aktuellen Projektes kam die Anforderung, dass ein automatisch generiertes Joomla-Menü (implementiert als Liste) nach jeweils drei Listenelementen automatisch umbrechen und einen neuen Block formen sollte:
Problem...Lösung: javascript
1. Versuch: Nach jedem dritten Element ein </ul><ul ="meineKlasse"> anfügen die Listenblöcke via css-float nebeneinander anordnen
Mit jQuery lässt sich das n-te Element in der Liste zwar einfach finden (z.B. jedes dritte), jedoch schreibt jQuery den einzufügenden Text um, so dass aus </ul><ul ="meineKlasse"> <ul ="meineKlasse"></ul> wird. Gut gemeint, aber bringt leider nichts.
$("div#menu3 ul.menu li:nth-child(3n)").after("</ul><ul>");
2. Versuch: Den Listenelementen position:relative geben und ab dem dritten bzw. sechsten Element die Elemente nach rechts und oben verschieben. Das hat dann auch einwandfrei geklappt:
$("div#menu3 ul.menu li:gt(3)").css({ left: "150px", top: "-6em" });
Erklärung:
div#menu3 ul.menu li => die Listenelemente des Menüs
:gt(3) => nach dem dritten Elemen [greater 3]
.css() => fügt die Positionierung via css ein. Im Stylesheet ist position:relative für die li-Elemente vordefiniert.
jQuery einbinden nicht vergessen:
<script src="/js/jquery-latest.js" type="text/javascript"></script>
In eigener Sache: Werde in Kürze ein Code-Plugin einfügen, ist ja kein Zustand ;-)
5 Kommentare zu "jQuery: Listenelemente nach x Elementen umbrechen"
wenn die Menupunkte alle gleich breit sind (100px) kann man der umschließenden Box den Wert 320px geben und overflow auf hidden stellen.
hi nico, ich hab’s bereits auch mit css probiert, leider ohne Erfolg. Hab mir das so vorgestellt, dass der umgebende Container durch seine Höhe begrenzt ist und die inneren “li”s floatend umgebrochen werden, sobald sie “unten” ankommen. Hm, weißt wie ich meine?
Hab daher gleich mal mit voller Freude Deinen Tipp ausprobiert, aber leider wird mit overflow:hidden alles was unter dem menu ist, abgeschnitten und nicht nach rechts umgebrochen. [1 Minute später] Hey cool – es klappt *smile* Bei den “li”s noch float:left eingefügt.
GANZ VIELEN LIEBEN DANK NICO!! Dann kann ich ja das jQuery wieder rausschmeißen :-)
[...] hatte mir geschrieben, dass das Umbrechen von “li”s in einen nächsten Block auch mit CSS funktioniert (ich [...]
Drei Jahre später brauch ich das hier sehr dringend, aber es gibt da nen gewaltigen Unterschied zu deiner CSS-Version!
Javascript Version macht das:
Menüpunkt1 Menüpunkt4 Menüpunkt7
Menüpunkt2 Menüpunkt5 Menüpunkt8
Menüpunkt3 Menüpunkt6 Menüpunkt9
Deine CSS Version macht das:
Menüpunkt1 Menüpunkt2 Menüpunkt3
Menüpunkt4 Menüpunkt5 Menüpunkt6
Menüpunkt7 Menüpunkt8 Menüpunkt9
Durch JS wirds also unten umgebrochen (Was ja gewünscht is) und bei CSS rechts.
Drei Jahre später brauch ich das hier sehr dringend, aber es gibt da nen gewaltigen Unterschied zu deiner CSS-Version!
Javascript Version macht das:
Menüpunkt1 Menüpunkt4 Menüpunkt7
Menüpunkt2 Menüpunkt5 Menüpunkt8
Menüpunkt3 Menüpunkt6 Menüpunkt9
Deine CSS Version macht das:
Menüpunkt1 Menüpunkt2 Menüpunkt3
Menüpunkt4 Menüpunkt5 Menüpunkt6
Menüpunkt7 Menüpunkt8 Menüpunkt9
Durch JS wirds also unten umgebrochen (Was ja gewünscht is) und bei CSS rechts.
Kommentieren