jQuery: Listenelemente nach x Elementen umbrechen

// 15102008 / Webprogrammierung / 5 Kommentare

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

Read other interesting articles:

Be Sociable, Share!

5 Kommentare zu "jQuery: Listenelemente nach x Elementen umbrechen"

  1. nico nico Oktober 16th, 2008 at 00:15

    wenn die Menupunkte alle gleich breit sind (100px) kann man der umschließenden Box den Wert 320px geben und overflow auf hidden stellen.

  2. Nicole Nicole Oktober 16th, 2008 at 09:06

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

  3. CSS: Listenelemente nach x Elementen umbrechen CSS: Listenelemente nach x Elementen umbrechen Oktober 16th, 2008 at 13:09

    […] hatte mir geschrieben, dass das Umbrechen von “li”s in einen nächsten Block auch mit CSS funktioniert (ich […]

  4. Sumit Sumit Juni 26th, 2011 at 14:15

    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.

  5. Sumit Sumit Juni 26th, 2011 at 14:15

    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




  • www.goneo.de