Add data attribute with Jquery to every image

Question

I need to have a data attribute added to every image on a page. This data images provides a lightbox functionality but since there so many images it would be nice to automate this by using Jquery.

So far I've played with the data attribute possibilities like:

$('.item a).attr('data-lightbox');

I have multiple images on a pages and all with the .item div should have the data attribute applied to. Am I thinking the right way?

[`.data( key, value )`](https://api.jquery.com/data/#data-key-value) — Andreas, Aug 03 '16 at 15:44
JQuery provide more methods like setter and gutter. .attr() method when you provide only key then it gives return value and when you set both key and value then it will change attribute on selection element. $('.item a').attr('data-lightbox ', 'value'); — user5200704, Aug 03 '16 at 16:08

Devz · Answer 1 · 2016-08-04T07:18:19.133

3

This will do the job

$('.item img').attr('data-lightbox', 'value');

edited Aug 04 '16 at 07:18

answered Aug 03 '16 at 15:47

Devz

603
6
18

It's better to use the built in data method – Richard Hamilton Aug 03 '16 at 15:51
http://stackoverflow.com/questions/7261619/jquery-data-vs-attr maybe this justify your point – Devz Aug 03 '16 at 16:22
Basically this is what did the trick: $j(".item-page a").each(function() { $j(this).attr("data-uk-lightbox", "value"); }); – Badger Aug 03 '16 at 19:23

Richard Hamilton · Answer 2 · 2016-08-03T15:51:12.303

2

You are using a getter method by only passing in the key as a parameter. You need to use a setter and pass in a key and value. The correct syntax is

$(selector).data(name,value)

Loop over the images and use the data() method

$("img").each(function() {
    $(this).data("lightbox", "value");
});

https://api.jquery.com/jquery.data/

edited Aug 03 '16 at 15:51

answered Aug 03 '16 at 15:45

Richard Hamilton

25,478
10
60
87

This seems like the logic way to do it. It's not working however. I might add that there is NO data attribute present in the div tag. Basically it looks like: and needs to be – Badger Aug 03 '16 at 19:15

Add data attribute with Jquery to every image

2 Answers2