79

I have the following HTML code:

<a class="toggle" href="#toggle">
    <img src="app/css/images/tock.png" alt="No" data-id="4" data-block="1">
</a>

I want to update the value of the src and data-block attributes using jQuery. How do I do this?

Update: As I have many image elements, I want to update the value of a specific image by using data-id.

alex
  • 6,818
  • 9
  • 52
  • 103
Ibrahim Azhar Armar
  • 25,288
  • 35
  • 131
  • 207

4 Answers4

179
$('.toggle img').data('block', 'something');
$('.toggle img').attr('src', 'something.jpg');

Use jQuery.data and jQuery.attr.

I'm showing them to you separately for the sake of understanding.

MarioRicalde
  • 9,131
  • 6
  • 40
  • 42
  • i am sorry i forgot to mention, but i want to select specific img by using data-id, the selector should select the image element by data id for example something like `$('toggle img[data-id=4]')` – Ibrahim Azhar Armar Oct 24 '11 at 10:43
  • 4
    You are almost there: `$('toggle img[data-id="4"]')` – JP Hellemons Oct 24 '11 at 10:51
  • 66
    FWIW, I am finding that in order to override a data-attribute, you have to use `.attr` and not `.data`. This is confusing because jQuery is able to attach data to the element, but that might not be reflected in the dom if the data-attribute already existed. – joe sepi Jun 24 '15 at 22:11
  • 3
    To show what I mean in the above comment, see my jsfiddle. The console log of the elements data shows the updated value but if you look at the console log of the element, in its dataset, (or view it with the elements inspector) you will see the original value. WAT http://jsfiddle.net/joesepi/kycajL4e/2/ – joe sepi Jun 24 '15 at 22:40
  • 4
    I never use .data, it always break. it do not see update at all and it never worked well for me. i always use .attr – Gino Jan 14 '16 at 20:55
  • be aware that .data('block', something) doesn't actually change the DOM – Picard Apr 04 '16 at 12:56
  • 2
    i just came across this issue, is there a reason why .data('block', something) doesn't change the DOM. The jQuery documentation doesn't appear to explain this, whats the point in implementing this feature? – ugotchi Sep 21 '17 at 09:57
  • 7
    For anyone wondering about @ugotchi's question, the answer is that jQuery's `data` is used to access a "data store" that jQuery adds to DOM elements. You can use it to store any data you like on any node in your DOM. The tricky bit is that this data store gets its initial values from the `data` attribute on the DOM node. So, you can _read_ the data attributes using `data()`, but if you _write_ to `data()` you're only writing to the data store, not to the original attributes. – Ben Hull Apr 07 '20 at 06:55
29
$('.toggle img').each(function(index) { 
    if($(this).attr('data-id') == '4')
    {
        $(this).attr('data-block', 'something');
        $(this).attr('src', 'something.jpg');
    }
});

or 

$('.toggle img[data-id="4"]').attr('data-block', 'something');
$('.toggle img[data-id="4"]').attr('src', 'something.jpg');
JP Hellemons
  • 5,977
  • 11
  • 63
  • 128
  • 2
    using jQuery.attr and not jQuery.data, as proposed in this answer, causes bugs in some browsers. have been there. – TheBigDoubleA Nov 07 '14 at 10:36
  • 9
    using data is indeed a good suggestion, but keep in mind that it does not modify the original dom element, which might give issues with other jquery that depends on the changing of the dom. http://www.peterbe.com/plog/data-and-attr-in-jquery – JP Hellemons Nov 07 '14 at 12:02
17

I want to change the width and height of a div. data attributes did not change it. Instead I use:

var size = $("#theme_photo_size").val().split("x");
$("#imageupload_img").width(size[0]);
$("#imageupload_img").attr("data-width", size[0]);
$("#imageupload_img").height(size[1]);
$("#imageupload_img").attr("data-height", size[1]);

be careful:

$("#imageupload_img").data("height", size[1]); //did not work

did not set it

$("#imageupload_img").attr("data-height", size[1]); // yes it worked!

this has set it.

Alp Altunel
  • 3,324
  • 1
  • 26
  • 27
5
$('.toggle img').data('block', 'something').attr('src', 'something.jpg');
Jayne Mast
  • 1,427
  • 1
  • 16
  • 32