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
Toon posts:

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

Pagina: 1
Acties:

Onderwerpen


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

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: 05-07 23:01
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: 05-07 23:01
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: 11:04

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: 10:11

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: 12-12 12:10
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: 08-12 15:57
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: 08-12 14:42
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


Apple iPhone XS Red Dead Redemption 2 LG W7 Google Pixel 3 XL OnePlus 6T (6GB ram) FIFA 19 Samsung Galaxy S10 Google Pixel 3

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