How do I set variable (changing) attribute names with jquery?

Question

I'm trying to set a variable attribute name, ie <a data-33="string">, with 33 being a random number generated by Math.random().

I have tried:

var randomNum1 = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
var attrb = 'data-' + randomNum1.toString(); 
$(this).attr({
    attrb : 'someString',
    attrb2 : 'someString'
});

But instead of adding an attribute of data-randomNumber="someString", it adds attrb="someString"

I'm trying to pass multiple attributes. I know I'm missing a basic javascript concept, but any help would be appreciated!

possible duplicate of Using a variable for a Javascript object key — Bergi
– Bergi, Commented Jan 30, 2014 at 4:40
@Bergi Not exactly a duplicate since the user is unaware of proper usage and his understanding is will be different. — Nagaraj Tantri
– Nagaraj Tantri, Commented Jan 30, 2014 at 4:44
@user3251562 IMHO do try to understand javascript objects and the way they can be accessed. Only knowledge of JQuery wont help you write good code. — Nagaraj Tantri
– Nagaraj Tantri, Commented Jan 30, 2014 at 4:46
+1 @LearningNeverStops Its crucial that people understand pure JavaScript with its objects and other concepts. JQuery is spoiling people :) — Steve Robinson
– Steve Robinson, Commented Jan 30, 2014 at 4:50

Steve Robinson · Accepted Answer · 2014-01-30 04:37:33Z

2

When you are doing, {attrb: "something", attr2: "something"}, the keys, attrb and attr2 are not evaluated and are taken as it is. So you cannot use variables over there.

To solve your problem, what you can do is, call the attr() method with two arguments - 1: the attribute, 2: the value:

var el = $(this);
el.attr(attrb, 'someString');
el.attr(attrb2, 'someString');

In this case the first argument of attr() is evaluated and the variable is substituted with the value.

answered Jan 30, 2014 at 4:37

Steve Robinson

3,9393 gold badges43 silver badges61 bronze badges

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

2 Comments

user3251562 Over a year ago

Thanks, admittedly I am spoiled with JQ, but am learning JS quickly with help from people like you!

Steve Robinson Over a year ago

Welcome! :) This will help A LOT. developer.mozilla.org/en-US/docs/Web/JavaScript/…

Coder · Accepted Answer · 2014-01-30 04:38:23Z

1

try this

var randomNum1 = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
var attrb = 'data-' + randomNum1.toString();
$(this).attr(attrb,"someString");
$(this).attr(attrb2,"someString");

answered Jan 30, 2014 at 4:38

Coder

7,09413 gold badges59 silver badges87 bronze badges

Comments

Quentin Engles · Accepted Answer · 2014-01-30 04:38:24Z

0

var randomNum1 = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
var atts = {};
   atts['data-' + randomNum1.toString()] = 'someString';
$(this).attr(atts);

Setting the names of object literals with variables works using square brackets.

answered Jan 30, 2014 at 4:38

Quentin Engles

2,8421 gold badge23 silver badges33 bronze badges

Comments

Luke Smith · Accepted Answer · 2014-01-30 04:38:45Z

0

jQuery has a built in data() function see here for the proper method documentation. As for your specific propblem I would suggest

var randomNum1 = Math.floor(Math.random() * (200 - 100 + 1)) + 100;
var attrb = randomNum1.toString(); 
var $this = $(this);
$this.data(attrb, 'someString');
$this.data(attrb2, 'somestring');

answered Jan 30, 2014 at 4:38

Luke Smith

8413 gold badges9 silver badges16 bronze badges

1 Comment

Steve Robinson Over a year ago

Object literals are taken as it is, attrb wont be replaced with its value.

Ashish Kumar · Accepted Answer · 2014-01-30 04:40:14Z

0

Try this:

function getRandom(){
    return (Math.floor(Math.random() * (200 - 100 + 1)) + 100).toString();
}

var attrs = {};

attrs["data-" + getRandom()] = "something";
attrs["data-" + getRandom()] = "something";
attrs["data-" + getRandom()] = "something";

//console.log(attrs);

$(".target").attr(attrs);

This will do something like:

<div class="target" data-108="something" data-123="something" data-107="something">something</div>

What I am doing is first creating the attributes obj separately, then passing in the .attr() method of jQuery.

Working Demo: http://jsfiddle.net/xBdcq/

answered Jan 30, 2014 at 4:40

Ashish Kumar

3,0393 gold badges20 silver badges27 bronze badges

Comments

Karthick Kumar · Accepted Answer · 2014-01-30 04:41:27Z

0

try like this

$(this).attr('attr-'+b,'somestring');

answered Jan 30, 2014 at 4:41

Karthick Kumar

2,3751 gold badge19 silver badges30 bronze badges

Collectives™ on Stack Overflow

How do I set variable (changing) attribute names with jquery?

6 Answers 6

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related