[jQuery] LI's wrappen per 5 in een UL

[Coen de Zeeuw]

Hallo,

Ik heb een sub-menu gemaakt met een bepaalde breedte waarbij elke 5 list-items in een div moeten worden gewrapt, om zo max. 3 wrappers (divs) te tonen. Floatend naast elkaar met elk 5 list-items.

Met jQuery probeer ik dit af te dwingen waarbij het bij de eerste 2 sub-menu's goed gaat maar bij het 3e sub-menu onder een menu-parent worden alle items opeens niet meer gewrapt. Wat doe ik fout?

code:

    jQuery('.sub-menu > li').each(function(i) {
        if( i % 5 == 0 ) {
            jQuery(this).nextAll().andSelf().slice(0,5).wrapAll('<div class="wrap_li"></div>');
            }

[NMe]

Zit je nu een <li> te wrappen in een <div>? Aangenomen dat die <li> gewoon in een <ul> staat zoals het hoort is die HTML niet valid en kan het alleen al daarom misgaan.

[Coen de Zeeuw]

Hey NMe je hebt helemaal gelijk, ik wrap 'm nu in een extra ul, helaas gaat het alsnog mis.

Bij het 3e sub-menu wrapped ie het 3e list-item wel maar de eerste 2 niet, waardoor ze niet links onder elkaar uitlijnen.

[ Voor 40% gewijzigd door Coen de Zeeuw op 18-07-2013 14:46 ]

[BtM909]

Als je zulke jQuery in elkaar flanst, dan kan je toch ook wel een klein beetje debuggen?

Zet eens even een kleine werkende testcase op http://jsfiddle.net/

[Coen de Zeeuw]

Hier is er 1'tje: http://jsfiddle.net/T6tu4/72/... zoals je ziet worden niet alle afbeeldingen gewrapped in de divs.

[Zoefff]

Coen de Zeeuw schreef op donderdag 18 juli 2013 @ 15:12:
Hier is er 1'tje: http://jsfiddle.net/T6tu4/72/... zoals je ziet worden niet alle afbeeldingen gewrapped in de divs.

Je selecteert anchors uit meerdere wrappers. Wat denk je dat de waarde van i is als je bij de eerste afbeelding van de tweede wrapper bent? En zou die deelbaar zijn door 5?

[MueR]

Begin eens met alle elementen uit die wrappers te halen en ze gewoon in de root zetten.

[JohnStaakke]

Zoefff schreef op donderdag 18 juli 2013 @ 15:42:
[...]

Je selecteert anchors uit meerdere wrappers. Wat denk je dat de waarde van i is als je bij de eerste afbeelding van de tweede wrapper bent? En zou die deelbaar zijn door 5?

Dat dus.

[hylke94]

MueR schreef op donderdag 18 juli 2013 @ 15:47:
Begin eens met alle elementen uit die wrappers te halen en ze gewoon in de root zetten.

http://jsfiddle.net/T6tu4/85/

[C0rnelis]

hylke94 schreef op donderdag 18 juli 2013 @ 16:24:
[...]


http://jsfiddle.net/T6tu4/85/

andSelf is deprecated, gebruik vanaf 1.8 addBack()

Verder lijkt me dit een prima oplossing, maar het kan eventueel anders:

JavaScript:

$('a:nth-child(5n+1)').each(function() {
        $(this).nextAll('a:lt(4)').addBack().wrapAll('<div class="slide"></div>');
});

edit:

en lijkt wel te werken met de code van Coen?
http://jsfiddle.net/T6tu4/86/

[ Voor 8% gewijzigd door C0rnelis op 20-07-2013 21:24 ]