83

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.

4 Answers 4

186
$('.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.

8
  • 5
    You are almost there: $('toggle img[data-id="4"]') Commented Oct 24, 2011 at 10:51
  • 71
    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
    Commented Jun 24, 2015 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 jsfiddle.net/joesepi/kycajL4e/2
    – joe sepi
    Commented Jun 24, 2015 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
    Commented Jan 14, 2016 at 20:55
  • 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
    Commented Apr 7, 2020 at 6:55
30
$('.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');
2
  • 2
    using jQuery.attr and not jQuery.data, as proposed in this answer, causes bugs in some browsers. have been there. Commented Nov 7, 2014 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. peterbe.com/plog/data-and-attr-in-jquery Commented Nov 7, 2014 at 12:02
18

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"); // text input like value: 640x480
$("#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.

5
$('.toggle img').data('block', 'something').attr('src', 'something.jpg');
1
  • this is not what i wanted, i have updated my question please have a look. Commented Oct 24, 2011 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.