How can i use a variable in a Jquery selector?

Question

How can I make this work? variable scope contains either Menu or Content. So i need it to find a input with the id Scope_Menu or Scope_Content depending on the variable scope.

var scope = $(this).data('scope');       
$('#frmEditPagevar').find('input[id="Scope_ + scope"]').prop("checked", true);

Template literals - `.find(\`input[id="Scope_${scope}"]\`)` - much more readable to me https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals — StudioTime, Feb 22 '17 at 12:00
http://stackoverflow.com/questions/5891840/how-to-use-javascript-variables-in-jquery-selectors — Pankaj Kumar Singh, Feb 22 '17 at 12:00

LordNeo · Answer 1 · 2017-02-22T11:59:46.583

2

$('#frmEditPagevar').find('input[id="Scope_' + scope + '"]').prop("checked", true);

You were on the right track, just keep an eye on your quotes and double quotes

edited Feb 22 '17 at 11:59

answered Feb 22 '17 at 11:58

LordNeo

1,195
1
8
21

You really don't need to find :) – Suresh Atta Feb 22 '17 at 12:02
Thanks for the answer, it worked. I will accept you answer in 7 minutes. – Mike Lammers Feb 22 '17 at 12:03
@sᴜʀᴇsʜᴀᴛᴛᴀ it all depends if his IDs are really unique or not. Despite it should be unique and the other approach could work, that's not guaranteed, specially when classes and ids are generated by some kind of template engine. – LordNeo Feb 22 '17 at 12:06

Mohammad · Accepted Answer · 2017-02-22T12:05:56.490

1

You don't need to use .find() because id attribute is unique in document and you can use jquery $() selector to selecting it.

$('#Scope_' + scope).prop("checked", true);

However if you want to use .find() change your code to bottom code

$('#frmEditPagevar').find('input[id="Scope_'+ scope +'"]').prop("checked", true);
// or
$('#frmEditPagevar').find('#Scope_'+ scope).prop("checked", true);

edited Feb 22 '17 at 12:05

answered Feb 22 '17 at 12:00

Mohammad

21,175
15
55
84

score 1 · Answer 3 · answered Feb 22 '17 at 12:01

1

Since you already have an id in hand, in an Ideal world, the below should work.

var scope = $(this).data('scope');       
$("#Scope_"+ scope).prop("checked", true);

answered Feb 22 '17 at 12:01

Suresh Atta

120,458
37
198
307

score 0 · Answer 4 · answered Feb 22 '17 at 12:04

0

You should your code with my below code::

var scope = $(this).data('scope');       
$('#frmEditPagevar').find('#Scope_' + scope).prop("checked", true);

answered Feb 22 '17 at 12:04

Rana Ghosh

4,514
5
23
40

How can i use a variable in a Jquery selector?

4 Answers4