Frage von perhp, 26

JavaScript - Um jedes 1 und dritte Element soll ein Wrapper gemacht werden?

Hallo, ich habe folgendes Problem. Bei mir funktioniert der Slick Slider (das ist das Slider Plugin, das ich verwende nicht korrekt), da ich die Breite bestimmter Elemente überschreibe, damit sie korrekt auch angezeigt werden.

Eine kurze Erklärung, was meine Datei genau machen soll: Ich habe einen horizontalen Kalender, der wie ein Slider funktioniert und zu den jeweils nächsten Tagen slidet.

Wenn der User ein startdatum und ein Enddatum eingibt, dann sollen in diesem Zeitraum alle Tage angezeigt werden in einem Kalender zB: startdatum 02.09 und enddatum 05.10 dann soll die Ausgabe folgendermaßen ausschauen (jeder Beichstrich ist bei mir ein eigenes Element): September, 2,3,4,5....30,Oktober,1,2,3,4,5

Damit es nun trotzdem funktioniert und jedes Element gleich groß ist für meinen Slider, will ich (da die Anzeige der Monate ca. wie 3 Tage breit sind) , um jedes 1-3 Element ein Wrapper, 4-7 Element ein Wrapper, 7-10 Element ein Wrapper usw. machen.Wenn aber bei den letzten Tagen nicht mehr genau drei Elemente übrig sind, dann soll darin natürlich das erste bzw. und zweite Element einen Wrapper bilden.

Hier seht ihr meinen Code, damit ihr versteht, wie ich das ganze aufgebaut habe.

http://codepen.io/anon/pen/redmOL

Antwort
von Sarkophator, 18

Du kannst einfach alle selektierten Elemente durchgehen und dabei mittels der slice-Funktion die jeweils 3 Elemente mit wrapAll in deinen Wrapper packen:

var unwrapped_elements = $(".content-item");
for(var i = 0; i < unwrapped_elements.length; i += 3)
unwrapped_elements.slice(i, i+3).wrapAll('<div class="content-wrapper"></div>');

Hier nochmal als Demo:

https://jsfiddle.net/h8208ksb/

Kommentar von perhp ,

Hallo danke für die Antwort. Nachdem ich diese Frage gestellt habe, bin ich selbst auf die Slice Funktion gekommen und habe es genau, wie du in dieser Demo, das ganze mit wrapAll gewrappt. Aufgrund eines anderen Problem, habe ich nochmal das ganze überarbeitet und will nun jeden Monat wrappen.

Hier ist mein momentanes Ergebnis.

http://codepen.io/anon/pen/redmOL

Die Ausgabe funktioniert noch nicht ganz, am Ende der Datei, aber das müsste nicht mehr schwer sein. Vermutlich stoße ich dann bei der Erstellung des Sliders auf ein anderes Problem, da bei mir jedes Monat unterschiedlich groß ist und es dann vermutlich zu Komplikationen kommmen wird, wenn ich versuche den Slider zu erstellen und bei mir die Slides nicht immer gleich aufgeteilt sind (d.h. im ersten Slide können zwei Monate sein und beim darauffolgenden nur mehr einer usw.)

Keine passende Antwort gefunden?

Fragen Sie die Community