How can I add a class to an anchor in a list item?

Question

I am building a website in Wordpress and need to add a class to the anchor element that is inside a list item. The list item has a unique ID. The class I need to add will give me smooth scrolling on the anchor link.

I do not want to alter the theme, that is why I want to add a class with JavaScript, or any better technique.

This is what I have tried but does not work:

$('li#menu-item-318').find('a').addClass('fl-scroll-link');

I my Console I get this error:

TypeError: $ is not a function. (In '$("#menu-item-318 a")', '$' is undefined) Error: {}

This is the specific code on my website:

<nav class="top-bar-nav"><ul id="menu-topbalk"><li id="menu-item-318"><a href="#contactgegevens" class="nav-link">Contact</a></li></ul></nav>

So the above a tag needs to get this second class: fl-scroll-link so that this will be the result:

<a href="#contactgegevens" class="nav-link fl-scroll-link">Contact</a>

I am learning every day and could use your help. Please explain the solution you propose.

// Solution //

Thanks a lot everyone, together we made it work! Hooray!

So I made 2 mistakes:

I was looking for a class but of course should be looking for an id.
Wordpress is uses jQuery instead of $!

The working code is:

jQuery(document).ready(function($) {
    $("#menu-item-318 a").addClass("fl-scroll-link");
});

Thanks again, I am very happy!

There's nothing wrong with the code you've shown us. Are you loading it _after_ the page renders? Scripting can't act on elements which don't exist. — isherwood, May 23 '22 at 18:25
Tip: hit `f12` to see the developer console. Then, you can learn more about *why* things don't work, and then either figure it out on your own or post the reason here. It's called *attaching the stack/error trace* — Yarin_007, May 23 '22 at 18:26
`I have also learned that it is good to use classList:` there is nothing wrong with using `addClass` if you already use jQuery. The question is more if it makes sense to use jQuery at all nowadays. — t.niese, May 23 '22 at 18:29
@Yarin_007 Thanks! I am working on an iPad and have an app installed called Inspect, so I have a Console and see all element. I checked the Console and what do you know, I got an error: `TypeError: $ is not a function. (In '$('li#menu-item-318')', '$' is undefined) Error: {}`. I have to research more to find out what it means. — koenmeteenk, May 23 '22 at 18:48
I believe that WordPress uses `jQuery` instead of `$`. See https://stackoverflow.com/questions/12258282/typeerror-is-not-a-function-wordpress — j08691, May 23 '22 at 19:11
@j08691 Yesssss, that is it! It works! This works: `jQuery(document).ready(function($) { $("#menu-item-318 a").addClass("fl-scroll-link"); });` — koenmeteenk, May 23 '22 at 19:30

Lucretius · Accepted Answer · 2022-05-23T19:30:13.943

There is a missing closure on your list item (or was)

<nav class="top-bar-nav">
  <ul id="menu-topbalk">
    <li id="menu-item-318">  <!-- missing ">" here -->
      <a href="#contactgegevens" class="nav-link">Contact</a>
    </li>
  </ul>
</nav>

To add the fl-scroll-link class to an anchor use the .addClass() method. Apply this to all of the child <a> elements underneath the menu like below. Since you're already using jquery I've used that also.

jQuery(document).ready(function($) {
    $("#menu-item-318 a").addClass("fl-scroll-link");
});

Also if you wanted to actually access it by its anchor href value there is another question that has answered that already here: How to get an element by its href in jquery?

In your case:

jQuery(document).ready(function($) {
    $('a[href="#contactgegevens"]').addClass("fl-scroll-link");
});

The error message about "$" being undefined means that your jquery library isn't being loaded. You'll want to make sure that your custom javascript is added AFTER the site loads jquery... or below is a pure javascript way to add a class to that <a> tag.

document.querySelector('a[href="#contactgegevens"]').classList.add("fl-scroll-link");

or if you wanted to apply that class to all <a> tags under the list item.

document.querySelector('#menu-item-318 a').classList.add("fl-scroll-link");

Yes, that was a typo, sharp! Thanks. It does not work. So the error is somewhere else. I got an error in my console, so I have to figure out what it means. — koenmeteenk, May 23 '22 at 18:58
Ok, well if you want to add that to your original question I can improve my answer further. — Lucretius, May 23 '22 at 19:01
That error means your jquery library isn't loaded. You'll need something like: `` — Lucretius, May 23 '22 at 19:10
Thanks! This also worked for me: `jQuery(document).ready(function($) { $("#menu-item-318 a").addClass("fl-scroll-link"); });` — koenmeteenk, May 23 '22 at 19:45
cool, keep in mind that you would not need additional `jquery(document).ready()` functions, just include all of your javascript in the same document.ready. — Lucretius, May 23 '22 at 19:46

How can I add a class to an anchor in a list item?

1 Answers1