Using a variable for value inside jQuery attribute-equals-value selector

Question

I have a div with an attribute of "foldername" which can something like "shoes, "dresses," etc . The div looks like this:

<div id='folder_template' class="openclosed_folder_icon subfolder" foldername="shoes">
    <img class="folder_icon" src="images/folder_closed.png"  />
    <div class="folder_label">name</div> 
</div>

I want to search for the div that has a particular value for foldername and change the image in it from "folder_closed.png" to "folder_open.png," so the graphic looks like an open folder instead of a closed folder. So I have the code:

$("div[foldername=g.currentGallery]").attr('src','images/folder_open.png');

where g.currentGallery is a variable holding the gallery name, e.g., "shoes," that I want to change. But this line gives me the error:

Syntax error, unrecognized expression: div[foldername=g.currentGallery]

But it will take:

$("div[foldername='shoes']").attr('src','images/folder_open.png');

Why can't I use a variable here?

Salman Arshad · Accepted Answer · 2014-11-13 18:11:56Z

1

Like this:

$('div[foldername="' + g.currentGallery.replace(/"/g, '\\"') + '"]').attr(/* whatever */);

Example if we have:

var g = { currentGallery: 'shoes["1"]' };

Then the selector expression becomes:

div[foldername="shoes[\"1\"]"]

edited Nov 13, 2014 at 18:11

answered Nov 13, 2014 at 17:56

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

4 Comments

PeterKA Over a year ago

This will allow any char, even ]: ..foldername='" + g.currentGallery + "']... ... See: jsfiddle.net/fiddleyetu/k0976349 @salmanA?

Salman Arshad Over a year ago

@PeterKA: yes, when ] is present in attribute value then quotes become necessary. Revised the answer.

PeterKA Over a year ago

+1 for quote escaping in the string. Never hurts to always quote anyway. :)

Steve Over a year ago

My code doesn't have any quotes to escape so the simplified solution was $('div[foldername="' + g.currentGallery + '"]').find('img').attr('src','images/folder_open.png'); Thanks

Collectives™ on Stack Overflow

Using a variable for value inside jQuery attribute-equals-value selector

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related