JQuery updating data- attribute

Question

Consider the following example of a photo album.

The first page and last page of the album are half the size of the spread of the album. I set the attr('data-width') and attr('data-width_correct') for comparison

For Example -- checkImageDimesions()

//Define if first or last page
if($(this).is(':first-child') || $(this).is(':last-child'))
{
    $(this).find('img').attr('data-height_correct' , maxHeight);
    $(this).find('img').attr('data-width_correct' , maxWidth / 2);  
} else{
    $(this).find('img').attr('data-height_correct' , maxHeight);
    $(this).find('img').attr('data-width_correct' , maxWidth);  
}

This works as expected, updating the data- with the correct values. My next step is if the width > width_correct I want to add a class of resize.

if($(this).find('img').data('width') > $(this).find('img').data('width_correct'))
{

     $(this).addClass('resize');
}

The calling of this function happens on the success of jQuery .sortable(). On first sort this works correctly, however on subsequent sorts, the initial image that is not sized correctly retains the .resize and any new image that would return false on width > width_correctdoes not get assigned resize

Sortable

$("#sortable").sortable(
{
success: function(){checkImageDimension()} 
}

please read this: http://forum.jquery.com/topic/when-to-use-attr-vs-data — mate64, Jan 15 '13 at 20:21
@cept0 This is exactly what I was looking for -- would be great answer! — SuperNinja, Jan 15 '13 at 20:26

score 1 · Accepted Answer · answered Jan 15 '13 at 20:28

Attaching object data (something that's not a simple string, number, or boolean) to a DOM node will often cause memory leaks in Internet Explorer. That's because DOM nodes are not native Javascript objects in IE, so it doesn't understand how to garbage collect things that are attached to them.

If you just need a simple flag or number on a DOM node you can use either attr("x_mycount", 1) or just set a property on the DOM node using this.x_mycount instead. (Be careful choosing the attribute or property name since you're in the DOM namespace and you could clobber something if you're not careful.) It's safest to use .data() though.

Source: forum.jquery.com/topic/when-to-use-attr-vs-data

score 0 · Answer 2 · answered Jan 15 '13 at 20:20

0

To update data attributes you just add a second parameter to the data function.

$('#elementID').data('width-correct', '400');

That's it, and it will update.

answered Jan 15 '13 at 20:20

jefffan24

1,326
3
20
35

JQuery updating data- attribute

2 Answers2

Linked