is it possible to set custom attribute by jQuery attr() function using JS variables

Question

I'm using jquery 1.5 and html4 standard.
I'm trying to set custom attribute which i get by javascript variable, but it is not setting up.code sample:

var attname="list1"; // this is changed on every call of the function where it is defined.    
var attvalue="b,c,d"; // this also changed.  
jQuery('#div1').attr({attname:attvalue});

but it treat attname as string itself rather variable. there are other option like using data(),prop() but they are supported in HTML5 and jquery 1.6 that is not possible for me at the moment.other problem is data can't be set on server side to be sync and used at client side by jquery data(). as they are syntactically diff. if there's some other way please suggest Thanks.

karim79 Thanks for edit @Sedat thanks to point the syntax error i was making. Brogrammer ,Usman, Andy Thanks all for providing input every one was correct in one or other way. — rain
– rain, Commented Sep 21, 2011 at 9:38

CoffeeRain · Accepted Answer · 2013-04-29 21:51:16Z

30

I guess you should use this

jQuery('#div').attr(attname,attvalue);

edited Apr 29, 2013 at 21:51

CoffeeRain

4,5304 gold badges33 silver badges50 bronze badges

answered Sep 21, 2011 at 8:55

Sedat Başar

3,8083 gold badges28 silver badges28 bronze badges

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

Comments

Muhammad Usman · Accepted Answer · 2011-09-21 09:03:10Z

16

Yes, but use data- prefix before to avoid collision

$('elm').attr('data-'+attname,attvalue);

Using data- prefix doesn't require HTML5.

answered Sep 21, 2011 at 9:03

Muhammad Usman

12.5k6 gold badges38 silver badges60 bronze badges

Comments

daryl · Accepted Answer · 2011-09-21 08:59:56Z

8

Yes you can add any attribute you want, just be careful:

$('#foobar').attr('foo','bar');

http://jsfiddle.net/each/rnnfk/ - Check out this demo

answered Sep 21, 2011 at 8:59

daryl

15.3k21 gold badges70 silver badges93 bronze badges

Comments

Andy · Accepted Answer · 2011-09-21 08:57:00Z

3

<div data-test="lala">asdf</div>

alert($('div').data('test'));
var t = 'data-test2';
var v = 'hiho';
$('div').attr(t,v);
alert($('div').data('test2'));
alert($('div').attr('data-test2'));

this all works for me: http://jsfiddle.net/r7uQ8/ Tested on jquery 1.4.4

answered Sep 21, 2011 at 8:57

Andy

30.2k9 gold badges43 silver badges59 bronze badges

2 Comments

daryl Over a year ago

Pretty sure if you read his question he doesn't want the use of data attributes.

Andy Over a year ago

@Brogrammer: Hm I understood it that way, that he meant he can't use data because he thought they only work in jquery 1.6. So i pointed out that they do work in 1.4.4 as well. And using them would be more elegant in my opinion.

karim79 · Accepted Answer · 2011-09-21 08:59:37Z

1

Square bracket notation is your friend:

var attname = "haha";
jQuery('#div')[0][attname] = "foo";
alert(jQuery('#div')[0][attname]);

http://jsfiddle.net/KJBHq/

answered Sep 21, 2011 at 8:59

karim79

343k67 gold badges420 silver badges409 bronze badges

Collectives™ on Stack Overflow

is it possible to set custom attribute by jQuery attr() function using JS variables

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related