Kast20 Mester
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);
Kast20 Mester
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);
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...
Kast20 Mester
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.
Kast20 Mester
31. juli 2020 - 12:53 #4
Rettelse:

<div id="sidemenu"> istedet for <div class="sidemenu">
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.
Kast20 Mester
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>
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);
Kast20 Mester
31. juli 2020 - 20:52 #8
Perfekt - tusind tak for hjælpen. :-)
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

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





Premium
Test: Lenovos seneste budget-basker kan det hele - man skal dog leve med en alt for synlig svaghed
Computerworld tester Lenovos Ideapad 5. Maskinen er stærk, prisen er skarp og designet er vellykket. Men der er stadig en god grund til at springe modellen over.
Job & Karriere
Regner din ferie væk? Brug tiden på at søge en af disse otte stillinger, der er ledige netop nu
Det sjasker ned over hele Danmark. Du kan bruge de våde sommerdage på at søge et af disse otte job, der er ledige lige nu.
White paper
Hybrid infrastruktur giver Jutlander Banks medarbejdere mere tid til kunderne
Hos Jutlander Bank sørger den nye, hybride infrastruktur fra HPE for, at bankens kunderådgivere i dag kan bruge væsentlig mere tid hos den enkelte kunde. I denne kundecase kan du få indsigt i hvordan IT-chef Kim Meling Christensen har oplevet samarbejdet med Atea og HPE – samt hvilke kundevendte fordele og muligheder for automatisering som det har givet.