Finding element(s) by data attribute = variable using jQuery

Question

Using (custom) jQuery data-attributes to retrieve the elements where these icons are displayed, I am successfully changing icons with this working code:

<i class="glyphicon glyphicon-check" data-year="2014" data-flag_check="1"></i>
...
<script>
   ...
   $('i[data-year="2014"]').removeClass('glyphicon-check').addClass('glyphicon-unchecked');

But, if I attempt to replace the constant 2014 with a variable, my code stops working.

var yearIn = "2014";
$('i[data-year=yearIn]').removeClass('glyphicon-check').addClass('glyphicon-unchecked');

Is it possible to perform this operation with a variable?

If so, what is wrong in my syntax?

2 revs · Accepted Answer · 2017-07-29 12:36:39Z

5

You're just missing string concatenation:

var yearIn = "2014";
$('i[data-year=' + yearIn + ']').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
// ------------^^^^^^^^^^^^^^

Or in ES2015+ you could use a template literal with a substitution token:

  var yearIn = "2014";
  $(`i[data-year=${yearIn}]`).removeClass('glyphicon-check').addClass('glyphicon-unchecked');
//  ^------------^^^^^^^^^-^

FWIW, I always use quotes around the value in the selector when it comes from a variable, just in case the variable ends up with something in it with spaces, etc.:

var yearIn = "2014";
$('i[data-year="' + yearIn + '"]').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
// ------------^--------------^

or

var yearIn = "2014";
$(`i[data-year="${yearIn}"]`).removeClass('glyphicon-check').addClass('glyphicon-unchecked');
// ------------^---------^

edited Jul 29, 2017 at 12:36

community wiki

2 revs
T.J. Crowder

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

2 Comments

Vucko Over a year ago

Or use template literals :)

T.J. Crowder Over a year ago

@Vucko: Quite. I really should start mixing those in, two years later...

Peter Mortensen · Accepted Answer · 2022-07-07 13:21:08Z

2

You are using the string literal 'yearIn' rather than the variable yearIn. Do something like this to concatenate the strings:

$('i[data-year=' + yearIn + ']').removeClass('glyphicon-check').addClass('glyphicon-unchecked');

edited Jul 7, 2022 at 13:21

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 29, 2017 at 12:31

Dij

9,8184 gold badges21 silver badges35 bronze badges

Collectives™ on Stack Overflow

Finding element(s) by data attribute = variable using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related