Question

I have several links like this, which have a dynamic number in it. I want to change the class of the child span from orange to red. This is the link:

<a id="details_104" href="#"><span class="status orange"></span></a>
<a id="details_105" href="#"><span class="status orange"></span></a>
<a id="details_106" href="#"><span class="status orange"></span></a>

I try to do this by using this jQuery code:

$("a #details_" + employee_id).removeClass("orange");
$("a #details_" + employee_id).addClass("red");

The variable employee_id is filled with the correct value, but I don’t see anything happen. What am I doing wrong here? Thanks!

Answer 1

$("a#details_" + employee_id + ' span.status').removeClass("orange");
$("a#details_" + employee_id + ' span.status').addClass("red");

You were selecting the a tag, not the span where your orange class actually is. Adding span.status to the end of the selector finds the link with your employee id, and then finds the span within that. Now removeClass() and addClass() operate on that span.

---

Also, this can be chained, because jQuery is awesome.

$("a#details_" + employee_id + ' span.status')
    .removeClass("orange").addClass("red");

This is also faster because it only runs the selector against the DOM once.