jQuery addClass to element based on attribute value

Question

I am stuck with this and need some help. I know the logical solution for this, but not sure how to translate it to jQuery code (newbie here :)). Any suggestions or help greatly appreciated!

I need to add a css class (active class), to an element that has a title attribute equal to the value of a variable. So, let's say my variable currentElement = 'great day'. There is also an a tag element on the page that has the title attribute of 'great day', such as <a title='great day' href='#'>.

With jQuery I want to: Find a tag in the DOM where currentElement == a tag title and add css class. So, ideally it should find that a tag and add the css class to it.

I came up with something like this but not working:

/* set currentElement var to the src attribute 
   value of an a tag on the page
   this works */
var currentElement = $('#greatLink'] img[src*=' + test + ']').attr('src');

/* now find an a tag on the page that has 
   the same title attribute as var currentElement
   this does not work */
$("a[title ='+currentElement+']").addClass('selectedThumb');

some syntax errors in the example code (first part)

Gabriele Petrioli
– Gabriele Petrioli

2010-12-18 22:47:31 +00:00
Commented Dec 18, 2010 at 22:47 — Gabriele Petrioli
– Gabriele Petrioli, Commented Dec 18, 2010 at 22:47

charliegriefer · Accepted Answer · 2010-12-18 22:41:00Z

9

I think you just need to change your selector to use double quotes instead of the nested single quotes that you have:

$( 'a[ title=' + currentElement + ']' ).addClass( 'selectedThumb' );

Just to point out, the value of the attribute in the selector doesn't need to be quoted. e.g.

$( 'a[ title="foo" ]' )

is the same as

$( 'a[ title=foo ]' )

The entire selector itself is just a string. Whether or not you quote the value foo in the sample above is irrelevant to the result. While it might look more "correct" to quote the value, since it's not necessary I find it easier to just leave it off. It almost certainly makes it less confusing in the issue such as yours, where you're concatenating literal strings with variable values.

edited Dec 18, 2010 at 22:41

answered Dec 18, 2010 at 22:35

charliegriefer

3,3821 gold badge21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IntricatePixels Over a year ago

thanks a lot for your tips and insight on this, much appreciated!

Ben · Accepted Answer · 2010-12-18 22:34:48Z

1

$('a[title="' + currentElement + '"]').addClass('selectedThumb');

answered Dec 18, 2010 at 22:34

Ben

16.6k9 gold badges47 silver badges65 bronze badges

Comments

rcravens · Accepted Answer · 2010-12-18 22:38:01Z

1

Try

$("a[title ='"+currentElement+"']").addClass('selectedThumb');

Notice the extra quotes.

answered Dec 18, 2010 at 22:38

rcravens

8,3982 gold badges35 silver badges27 bronze badges

1 Comment

rcravens Over a year ago

Wow. Looks like I should refresh before posting.

Omkar · Accepted Answer · 2010-12-18 22:38:33Z

0

$('[title='+currentElement+']').addClass('yourclass');

answered Dec 18, 2010 at 22:38

Omkar

3661 silver badge8 bronze badges

Collectives™ on Stack Overflow

jQuery addClass to element based on attribute value

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related