jQuery: Adding a class to <a> element

Question

I have a WordPress site and I would like to add a class to the links in the main navigation using jQuery.

This is how the code currently looks:

HTML

<div class="nav-menu">
<ul>
<li class="current_page_item">
<a title="Home" href="www.example.com">Home</a>
</li>
...
</ul>
</div>

And this is what I'd like to achieve:

HTML

<div class="nav-menu">
<ul>
<li class="current_page_item">
<a title="Home" href="www.example.com" class="new-class-goes-here">Home</a>
</li>
...
</ul>
</div>

Does anyone have a clue how to do this?

Answer 1

You can use jQuery's .addClass() method and the appropriate selector for the <a> tags:

$(".nav-menu a").addClass("new-class-goes-here");

Here is a jsFiddle to demonstrate.