CODEWITHSUNDEEP
jquery
John
John

Reputation: 6622

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 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!

Upvotes: 3

Views: 24822

Answers (8)

Alex Wayne
Alex Wayne

Reputation: 187272

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

Upvotes: 7

alexl
alexl

Reputation: 6851

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

Upvotes: 0

macarthy
macarthy

Reputation: 3069

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.

Upvotes: 0

roryf
roryf

Reputation: 30170

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?

Upvotes: 0

Adeel
Adeel

Reputation: 19238

Change a #details_ to #details_

Upvotes: 0

Syl
Syl

Reputation: 2783

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

$("a#details_" + id)

Upvotes: 0

MarkXA
MarkXA

Reputation: 4384

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.

Upvotes: 0

simon
simon

Reputation: 16340

$("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 :)

Upvotes: 4

Related Questions