How to add variable inside jQuery selector

Question

Good Day

I want to add a variable into a jQuery selector, but the syntax is wrong:

var c = $(this).attr('class');

            if ($('#articleThumb ul li img').hasClass(c)) {
                $('#articleThumb ul li img.'+c').clone().appendTo('#articleFeatured');
            }

the class

img.class is a variable and not a constant like img.birds for example...

Thank you

Grant Thomas · Accepted Answer · 2013-03-22 10:30:32Z

8

Your quotes are off, notice the stray one after c. It should be:

$('#articleThumb ul li img.' + c)

answered Mar 22, 2013 at 10:30

Grant Thomas

45.1k10 gold badges88 silver badges129 bronze badges

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

2 Comments

David Van Staden Over a year ago

One more question: If there is more than one element that has a specific class, how do I append only the first one?

Grant Thomas Over a year ago

@DavidVanStaden You can use eq(0) in your selector, such that: $('#articleThumb ul li img.' + c + ':eq(0)')

Adil · Accepted Answer · 2013-03-22 10:30:45Z

2

You can simply concatenate the variable with selector string. Remove the extra single quote at the end of c in selector.

Change

 $('#articleThumb ul li img.'+c')

To

$('#articleThumb ul li img.' + c)

answered Mar 22, 2013 at 10:30

Adil

148k25 gold badges217 silver badges207 bronze badges

5 Comments

David Van Staden Over a year ago

One more question: If there is more than one element that has a specific class, how do I append only the first one?

Adil Over a year ago

$('.classname:first') will give you first element

David Van Staden Over a year ago

yeah but the loop that the append function will run each time a specific class is found...so it will not listen to the :first selector inside the append function...since the append function will execute again

Adil Over a year ago

Sorry, could not get you, can you make a fiddle?

David Van Staden Over a year ago

As Grant Thomas pointed out - you can use: $('#articleThumb ul li img.' + c + ':eq(0)') to prevent copies/redundancy

Darren · Accepted Answer · 2013-03-22 10:31:00Z

2

Looks like you're adding an additional '

$('#articleThumb ul li img.' + c)

answered Mar 22, 2013 at 10:31

Darren

71.2k24 gold badges141 silver badges146 bronze badges

Collectives™ on Stack Overflow

How to add variable inside jQuery selector

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related