jQuery addClass

[Verwijderd]

Geachte medetweakers,

Via jQuery voeg ik een extra class toe voor een <li> element om de achtergrond een divider, bij het laatste li element te verbergen. Echter wanneer de pagina langer doet over het laden blijft het laatste <li> element er even staan met een achtergrond.

Aangezien ik deze class op 2 menu's toepas, vind ik het niet echt netjes. Is er een manier om die toch goed te verbergen?

In mijn scripts.js heb ik dit al helemaal bovenaan gezet:

code:

/* Menu classes */
jQuery(window).load(function(){
    jQuery('#topmenu>li:last').addClass('last').css("background", "none");
    jQuery('#menu>ul li:last').addClass('last').css("background", "none");
    jQuery('#menu>ul li:first').addClass('first');
});

Ook in de css heb ik geprobeerd om wat elementen om te wisselen. Hopelijk heeft iemand een oplossing

Thanks!

[MoietyMe]

Waarom niet gewoon met CSS?

Cascading Stylesheet:

#menu > ul li:last-child {
background:none;
}

[Verwijderd]

In de css heb ik dit ook gedaan, maar zonder resultaat. Vandaar dat ik 'm al aanroep bij het js. Maar dit heeft ook geen effect.

[MoietyMe]

Kun je dan wellicht de relevante HTML posten?

[Verwijderd]

Zeker

code:

          <nav id="menu" class="horizontalmenu">
              <ul class="menu">
                  <li>
                      <a href="#" title="Menutitel">Process Consulting</a>
                  </li>
                  <li>
                      <a href="#" title="Menutitel">Process Safety Consulting</a>
                        <ul class="sub-nav">
                            <li><a href="#" title="subnav">Subnav 1</a></li>
                            <li><a href="#" title="subnav">Subnav 2</a></li>
                        </ul>                      
                  </li>
                  <li>
                      <a href="#" title="Menutitel">Management Consulting</a>
                  </li>
                  <li>
                      <a href="#" title="Menutitel">Education</a>
                  </li>
                  <li>
                      <a href="#" title="Menutitel">Employment</a>
                  </li>
                  <li>
                      <a href="#" title="Menutitel">Photo Gallery</a>
                  </li>
                  <li>
                      <a href="#" title="Menutitel">Reprocess Ltd Brochure</a>
                  </li>                                                                                                            
              </ul>
          </nav>

Dit is het menu met daarin de subnav. Het laatste li element krijgt dus die extra class mee. Zit nog een menu'tje in de pagina met exact dezelfde structuur.

[MoietyMe]

Oeps ik had een klein foutje in mijn CSS. Nu aangepast, probeer dat eens.

Lijkt toch heel goed te werken: :last-child.

[ Voor 40% gewijzigd door MoietyMe op 09-10-2012 09:39 ]

[Verwijderd]

Thanks dit werkt!

[Zoefff]

Toch zal je nog wel een oplossing moeten verzinnen voor IE 8 en 7, die bieden geen ondersteuning voor de :last-child selector. Als het mogelijk is om de styling zo te doen dat je de :last-child selector kan vermijden verdient dat wat mij betreft de voorkeur.

[Verwijderd]

Ja inderdaad Zoefff dat las ik ook, heb momteel het javascript en last-child toegepast. In de huidige browsers gaat 't nu perfect alleen in IE7 & 8 inderdaad nog even die border flikkering aan de rechterkant van het laatste li element. Als iemand daar nog een oplossing voor heeft dan hoor ik deze graag

[Zoefff]

Geef eens een gestijld voorbeeld van wat je wil bereiken (of een mockup). Vaak kan je goed om het gebruik van :last-child heenwerken, bijvoorbeeld om dan bepaalde properties "om te draaien" waardoor je het laatste element standaard opmaakt zoals je het wil hebben en de uitzonderingen juist op de :first-child kan beschrijven, dat breder wordt ondersteund.

[Barryvdh]

Hoe genereer je het menu? Als je het server-side genereert, kan je ook een class 'last' meegeven, dat wordt altijd ondersteund. Of zit je vast aan een vaste html?

[Bosmonster]

Als je de window-load nu eens vervangt met document ready, is je flash in de meeste gevallen al weg. Je wacht nu namelijk ook tot alles geladen is, inclusief afbeeldingen.

:last-child kun je natuurlijk ook gebruiken als extra voor modernere browsers (of eigenlijk andersom, de jQuery fix voor IE7/8).

[ Voor 27% gewijzigd door Bosmonster op 11-10-2012 17:06 ]

[alienfruit]

Maar je kan niet de HTML aanpassen en een first en last klasse toevoegen?

[Wiethoofd]

De last-child werkt toch gewoon in CSS, waarom moet je met JS dan de laatste <li> targetten als dat met de CSS meteen al kan zonder extra classes toe te voegen.

En IE7 ondersteunt wel de first-child, dus de boel omdraaien kan, en ik vind zelf li+li altijd prettig omdat je dan de eerste li met rust laat qua 'extra' opmaak.

[Zoefff]

Volgens mij was er al duidelijk beargumenteerd dat dat :last-child dus niet "gewoon" werkt, omdat IE 7 en 8 daar geen ondersteuning voor bieden. Evenals de adjecent sibling selector; die werkt vanaf IE8 goed, maar in IE7 werkt die niet altijd omdat comments ook als siblings gezien worden en het op die manier dus nog wel eens mis zou kunnen gaan.