When to change data attribute with "data" or "attr"?

Question

I am dynamically changing the data-attribute of a couple of elements. An 'img' and an 'a' type. The 'img' element works with the following code:

$("img[data-image-index-no-"+self.options.typeOfImage+"="+nextIndexNo+"]").data("image-index-no-"+self.options.typeOfImage, newIndexNo);

I then wanted to change an 'a' link element and wrote:

$("a[data-slide-index="+nextIndexNo+"]").data("slide-index", newIndexNo);

The above didn't work but the I got it to work using:

$("a[data-slide-index="+nextIndexNo+"]").attr("data-slide-index", newIndexNo);

I would like to know why using the .data works with the img element but not the 'a' element? And which method is the preferred way?

Any ideas on this?

possible duplicate of [jQuery Data vs Attr?](http://stackoverflow.com/questions/7261619/jquery-data-vs-attr) — hakazvaka, Dec 11 '14 at 19:18
My first guess would be this - on `` tag you already have `data-something` attribute added, while on `` tag you don't? =) If `data-whatever` attribute isn't existent on an element, you need to create it first with `.attr()` and then modify it. — Davion, Dec 11 '14 at 19:26
@Davion I do have the data-slide-index set on the 'a' elements. :-) — John T, Dec 11 '14 at 19:42
Then it has to be the function "firing" order. Like I wrote in my previous comment, `.data()` tries to find an existent `data-` attribute (the same moment when the specific method fires), while `.attr()` can change OR create that specific attribute if it can't find it. I'm guessing you're incrementing AND trying to find an element with new `nextIndexNo` before you update that same element. — Davion, Dec 11 '14 at 19:56
@Davion I think you've hit the sharp point thing on the end! Thanks. Put that as an answer and I'll tick it up. Cheers :-) — John T, Dec 12 '14 at 08:40

score 2 · Accepted Answer · answered Dec 12 '14 at 10:19

When you fire a .data() method it tries to find data- element's attribute. If the attribute is non existent, the method won't work.

Similarly to that, .attr() also tries to find some specified element's attribute with one difference that if it can't find it, it will create it.

So, in your case, I'd guess that you're incrementing and trying to find an element with new nextIndexNo before actually updating that same element. As that element has the old nextIndexNo value, .data() method won't be able to find it, thus why .attr() works.

Glad I could point you in the right direction =)

When to change data attribute with "data" or "attr"?

1 Answers1