I'm trying to reset data attributes after an animation and am running through some trouble applying the technique from answer 2 of this post.

Not sure what I'm missing here. Seems theoretically feasible to say for each data attribute, etc.

UPDATE:

Worth mentioning that the data keys are all different. E.g. data-1="abc", data-2="abc", etc, hence the need for a for loop that simply looks for data attributes.

HTML

var total = 0;    
$.each($('*').data(), function(key, value) {        
    if (key){    
        var thiis = $(this);            
        total += key;            
        thiis.removeData();            
        thiis.data(total, value);
    }
});

I'm trying to reset data attributes after an animation and am running through some trouble applying the technique from answer 2 of this post.

Not sure what I'm missing here. Seems theoretically feasible to say for each data attribute, etc.

UPDATE:

Worth mentioning that the data keys are all different. E.g. data-1="abc", data-2="abc", etc, hence the need for a for loop that simply looks for data attributes.

HTML

var total = 0;    
$.each($('*').data(), function(key, value) {        
    if (key){    
        var thiis = $(this);            
        total += key;            
        thiis.removeData();            
        thiis.data(total, value);
    }
});

• javascript
• jquery
• loops
• attributes
• each

• 1 More details needed.! Please post your html. – Rajaprabhu Aravindasamy Commented Jan 20, 2014 at 6:36
• @RajaprabhuAravindasamy Thanks for the reply. The HTML in my application changes and is irrelevant to the post - just looking for a theoretical answer on gathering all data attributes within a for loop – technopeasant Commented Jan 20, 2014 at 6:38
• 1 $('*').data() is the problem... you need to target a singe element... so change * to something else – Arun P Johny Commented Jan 20, 2014 at 6:38
• are you targeting a particular data attribute or all... – Arun P Johny Commented Jan 20, 2014 at 6:39
• 1 also there is a difference between the data attribute and the data() api... the data api might use the data-* attribute to initialize the value after that the changes made using data api will not be reflected in the attribute – Arun P Johny Commented Jan 20, 2014 at 6:41

1 Answer 1

Boom, got it. The script has a lot of overhead, so running it in an instance that a user will wait through isn't an option, IMO. You could improve it with specificity instead of the * selector.

JavaScript (jQuery):

var counter  = 1; // not necessary for your implementation, using it to adjust numeric data keys

$('*').each(function(){ // query all selectors and run through a loop

    var thiis    = $(this),
        dataAttr = thiis.data(),
        i;

    if (dataAttr) { // if the element has data (regardless of attribute)

        var newAttrs = []; // for the element's new data values

        $.each(dataAttr, function(key, value) { // loop through each data object

            var newKey  = key + counter, // calculate new data key
                newAttr = [newKey, value]; // push the new data set

            newAttrs.push(newAttr); // push to elements new attributes array

            thiis
                .removeData(key) // remove the data
                .removeAttr('data-' + key); // remvoe the attribute (unnecessary)
        });

        for (i = 0; i < newAttrs.length; i++) { // for each new attribute

            thiis.data(newAttrs[i][0], newAttrs[i][1]); // add the data
            thiis.attr('data-' + newAttrs[i][0], newAttrs[i][1]); // add the attribute (unnecessary)
        }
    }
});