Select element by dynamic class

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 thi开发者_如何学编程s 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!

$("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.

$("a #details_" + employee_id)

should be

$("a#details_" + employee_id + " span.status")

or even just

$("#details_" + employee_id + " span.status")

(your IDs are all unique, right? ;))

that's all :)

Your selector is looking for that ID as a child of an A element. You just need $("#details_" + employee_id + " span").removeClass("orange").addClass("red"); to find the SPAN that's a child of that ID.

you need to remove the space between a and #, because the id is in the same item, not a child.

$("a#details_" + id)

Change a #details_ to #details_

Your selector is looking for an element with id details_xx that is a child of an a element, when really you want the span element that is a child of the a.

In general when using ID selectors it's not necessary to prefix them with anything, as the element should be unique (I say in general, you might for instance need special handling only on pages where the body has a particular class).

So the selectors would become:

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

It's also possible to chain these methods since they both act on the same element:

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

Might I also suggest you use more semantic class names than orange and red, they work for now but what happens when you want them changed to blue and greeen?

Try :

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

Edit added span.

Finding the element once is fast than doing it twice.

try this:

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

or

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

Hope it helps