Cookies op Tweakers

Tweakers maakt gebruik van cookies, onder andere om de website te analyseren, het gebruiksgemak te vergroten en advertenties te tonen. Door gebruik te maken van deze website, of door op 'Ga verder' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt, bekijk dan ons cookiebeleid.

Meer informatie

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

Pagina: 1
Acties:

Onderwerpen


  • Coen de Zeeuw
  • Registratie: december 2012
  • Laatst online: 23-05-2017
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:
1
2
3
4
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
  • Registratie: februari 2004
  • Laatst online: 23-06 18:19

NMe

Admin Devschuur®

Quia Ego Sic Dico.

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.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


  • Coen de Zeeuw
  • Registratie: december 2012
  • Laatst online: 23-05-2017
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.

Coen de Zeeuw wijzigde deze reactie 18-07-2013 14:46 (40%)


  • BtM909
  • Registratie: juni 2000
  • Niet online

BtM909

Moderator Devschuur®

Watch out Guys...

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

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.


  • Coen de Zeeuw
  • Registratie: december 2012
  • Laatst online: 23-05-2017
Hier is er 1'tje: http://jsfiddle.net/T6tu4/72/... zoals je ziet worden niet alle afbeeldingen gewrapped in de divs.

  • Zoefff
  • Registratie: september 2001
  • Laatst online: 23-06 11:11

Zoefff

❤ 

quote:
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? ;)


FotoblogWerkaandemuur.nlMoestuincursus.nlTwitter


  • MueR
  • Registratie: januari 2004
  • Laatst online: 23-06 18:15

MueR

Moderator Devschuur®

is niet lief

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

Anyone who gets in between me and my morning coffee should be insecure.


  • JohnStaakke
  • Registratie: oktober 2007
  • Laatst online: 23:07
quote:
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.

Intel Core 2 Duo E6850 | Gigabyte | 2x TWIN2X2048 4-4-4-12 | XFX 8800 GTX | 2x Western Digital Raptor 72GB RAID0 | 1 x 500GB Samsung Spinpoint T166 | Scythe Infinity | Antec Nine Hundred


  • hylke94
  • Registratie: maart 2012
  • Laatst online: 13-06 22:32
quote:
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
  • Registratie: juni 2010
  • Laatst online: 19-06 20:14
quote:
andSelf is deprecated, gebruik vanaf 1.8 addBack()

Verder lijkt me dit een prima oplossing, maar het kan eventueel anders:
JavaScript:
1
2
3
$('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/

C0rnelis wijzigde deze reactie 20-07-2013 21:24 (8%)

Pagina: 1


Call of Duty: Black Ops 4 HTC U12+ dual sim LG W7 Google Pixel 3 XL OnePlus 6 Battlefield V Samsung Galaxy S9 Dual Sim Google Pixel 3

Tweakers vormt samen met Tweakers Elect, Hardware.Info, Autotrack, Nationale Vacaturebank en Intermediair de Persgroep Online Services B.V. © 1998 - 2018 Hosting door True

*