Add dynamic data-attribute with jQuery

Question

Is there a way to add a "dynamic" data-attribute to a DOM element with jQuery?

This, for example, doesn't work:

var value = 100;

// hoping to add a 'data-100' attribute 
$('div').attr({
  String('data-' + value) :'display: block'
});

It throws the error:

Uncaught SyntaxError: Unexpected token (

obs: as far as I know if you sum a string with an integer in JS, it will cast everthing as a String, but anyway I tried with String() because maybe in some language that worked for me once.

This obviously won't work (it will add the 'custom_data' and not the 'data-100' attribute):

var custom_data = 'data-100';

// hoping to add a 'data-100' attribute 
$('div').attr({
  custom_data :'display: block'
});

Javascript doesn't have type coercion, what makes you think String() would be valid ? — adeneo
– adeneo, Commented Feb 27, 2015 at 19:28

Community · Accepted Answer · 2017-05-23 12:28:32Z

2

Do

$('div').attr("data-"+value,"display:block");

Your syntax is wrong see similar

Fiddle

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Feb 27, 2015 at 19:30

singhakash

7,9196 gold badges33 silver badges65 bronze badges

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

1 Comment

zok Over a year ago

Got it, it shouldn't be inside an object. Though it works that way, except that it tries to cast the key to a string, is that correct?

Collectives™ on Stack Overflow

Add dynamic data-attribute with jQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related