Avatar billede Kast20 Seniormester
31. juli 2020 - 02:03 Der er 7 kommentarer og
1 løsning

Hjælp til lille jQuery script

Hej,

Har en menu der ser således ud:

<nav>
<ul>
<li><a href="#section1" class="highlight">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>

Jeg søger et jQuery script der automatisk tilføjer class="highlight" på LI-elementet omkring det link som allerede har class="highlight", så markup bliver til:

<nav>
<ul>
<li class="highlight"><a href="#section1" class="highlight">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>

Har prøvet med nedenstående men det virker desværre ikke:

(function($) {
if ($("#sidemenu ul li a").hasClass('highlight')){
    $("#sidemenu ul li").addClass('highlight');
}
})(jQuery);
Avatar billede Kast20 Seniormester
31. juli 2020 - 02:21 #1
Eller dette som heller ikke virker:

(function($) {

$("ul li a").each(function(index) {
  if($(this).hasClass('highlight'))
  $(this).parent('li').addClass('highlight');
});

})(jQuery);
Avatar billede softspot Forsker
31. juli 2020 - 08:20 #2
Med udgangspunkt i denne kode:

(function($) {
if ($("#sidemenu ul li a").hasClass('highlight')){
    $("#sidemenu ul li").addClass('highlight');
}
})(jQuery);

Hvor findes det element som har id "sidemenu"? Det ses ikke i den kode du har vist.

Eksisterer menuen i DOM på det tidspunkt, hvor kode udføres (onload), eller er menuen dynamisk opbygget, så den f.eks. først indlæses, når der sker en eller anden handling på siden? Hvis den er dynamisk skal du håndtere det på en anden måde...
Avatar billede Kast20 Seniormester
31. juli 2020 - 12:52 #3
Hej softspot,

Div containeren "sidemenu" ligger rundt om menuen. Den ligger dog ikke lige før <nav> elementet.

<div class="sidemenu">
<div>
<div>

<nav>
<ul>
<li><a href="#section1" class="highlight">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
</ul>
</nav>

</div>
</div>
</div>

Menuen eksisterer i DOM når siden er indlæst og er ikke dynamisk.
Avatar billede Kast20 Seniormester
31. juli 2020 - 12:53 #4
Rettelse:

<div id="sidemenu"> istedet for <div class="sidemenu">
Avatar billede softspot Forsker
31. juli 2020 - 13:53 #5
Prøv med denne version:

(function($) {
    $("#sidemenu ul li a.highlight").closest("li").addClass('highlight');
}
})(jQuery);

Den finder alle links, under DOM-elementet med id "sidemenu", som ligger i en ul li og har knyttet klassen "highlight" og sætter klassen "highlight" på det nærmeste forfader-element af typen li.
Avatar billede Kast20 Seniormester
31. juli 2020 - 20:38 #6
Hmm synes ikke lige den tilføjer noget til <li> elementet.

Har det nogen betydning at linket også benytter andre klasser?

<li><a href="#section1" class="highlight klasse2 klasse3">Section 1</a></li>
Avatar billede softspot Forsker
31. juli 2020 - 20:48 #7
Det er givetvis fordi der er en syntaksfejl i den kodestump. Prøv denne i stedet:

(function($) {
    $("#sidemenu ul li a.highlight").closest("li").addClass('highlight');
})(jQuery);
Avatar billede Kast20 Seniormester
31. juli 2020 - 20:52 #8
Perfekt - tusind tak for hjælpen. :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester