72

This works:

$(myObj).attr("data-test-1", num1);
$(myObj).attr("data-test-2", num2);

But this doesn't:

$(myObj).attr({
  data-test-1: num1,
  data-test-2: num2
});

Am I missing something really obvious here?

Garry Pettet
  • 8,096
  • 22
  • 65
  • 103

3 Answers3

151

Sure, like this:

$(myObj).attr({"data-test-1": num1, "data-test-2": num2});

Like the .attr() docs state:

Setting several attributes at once

To change the alt attribute and add the title attribute at the same time, pass both sets of names and values into the method at once using a plain JavaScript object. Each key-value pair in the object adds or modifies an attribute:

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

When setting multiple attributes, the quotes around attribute names are optional.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • 11
    "the quotes around attribute names are optional" only applies to camelCased properties, the OP wants to use dashes, quotes should be mandatory in this case -> `Unexpected token -` – m90 May 07 '13 at 15:24
  • @m90 - That's taken directly from the jQuery API, it's not my comment. – j08691 May 07 '13 at 15:25
  • 4
    I'm aware of that but the dashes are what causes the OP's problems so I guess one should add that. – m90 May 07 '13 at 15:26
  • Since num1 and num2 are integers, do I need to pass them as num1.toString() as well? – Garry Pettet May 07 '13 at 16:05
  • I just tested that and it won't matter as the even `num1.toString()` still is stored as type Number. – j08691 May 07 '13 at 16:11
  • This does not work or at least is failing on chrome. What does work is $(myObj).data({"data-test-1": num1, "data-test-2": num2}); – tibc-dev Feb 20 '14 at 01:58
  • @tibc-dev - It still works fine, even in Chrome. Not sure what you're doing wrong without an example. – j08691 Feb 20 '14 at 04:15
7

Yes it is possible to setup multiple attributes, just use simple Object literal syntax. Example:

$('#my_image').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

More info about attr method can be found here.

Goran
  • 3,292
  • 2
  • 29
  • 32
  • 2
    [JSON is not the same as Object literal syntax](http://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation). What you're using is the latter. – Matt May 07 '13 at 15:20
4

Sorry for posting an answer to an already solved question after so many years.

I just thought about keeping the thread up to date with recommended solution[citation needed] as on date.

Since jQuery 1.2.3, there is a .data() function that takes arguments to get/set data attributes (setting multiple was available since 1.4.3) like this:

/* 
 ** In all the example below, note that 
 ** 'data-' is removed from attribute name
 */

// Setter (single)
$('#my_image').data('test-1', 'num1');
$('#my_image').data('test-2', 'num2');

// Setter (multiple)
$('#my_image').data({'test-1':'num1', 'test-2':'num2'});

// Getter (single)
$('#my_image').data('test-1');    // num1
$('#my_image').data('test-2');    // num2

It must be noted that setting data attributes with .data() doesn't update the DOM, so you can't see these in the DOM inspector. Also, they are not cross compatible with .attr(). However, the data attributes set with .attr() can be retrieved with .data() (in short, any attributes that begin with 'data-' can be retrieved with .data()).

// Setter
$('#my_image').attr('data-test-3', 'num3');    // note the 'data-' on attr name

// Getter
$('#my_image').data('test-3');    // num3
Fr0zenFyr
  • 1,899
  • 2
  • 28
  • 48
  • ```$('[data-id="5e4deced-0779-4dcd-ae23-d62a51817c1a"]').attr('data-ordinal', 5); $('[data-id="5e4deced-0779-4dcd-ae23-d62a51817c1a"]').data('ordinal'); // Output -- 4 ``` The `attr()` set does not update `data()`. So we need to update that separately. – Jai Kumaresh Dec 16 '22 at 07:22