jQuery.fn.extend({
renameAttr: function(name, newName, removeData) {
var val;
return this.each(function() {
val = jQuery.attr(this, name);
jQuery.attr(this, newName, val);
jQuery.removeAttr(this, name);
// move original data
if (removeData !== false) {
jQuery.removeData(this, name.replace('data-', ''));
}
});
}
});
$(function() {
var t = $('#test'),
result = function(m, t1, t2) {
// data-attr="value" is stored as .data("attr") = value
var t1d = t1.replace('data-', ''),
t2d = t2.replace('data-', ''),
x = '<h2>' + m + '</h2>' + t1 + ' = ' + t.attr(t1) + ', data("' + t1d + '") = ' + t.data(t1d) + ' <br>' + t2 + ' = ' + t.attr(t2) + ', data("' + t2d + '") = ' + t.data(t2d) + ' <br><br>';
x = x.replace(/= undefined/g, '= <span class="und">undefined</span>').replace(/= testing/g, '= <span class="tst">testing</span>');
$('#result').append(x);
}
result('Original', 'data-test1', 'data-test2');
// rename data-test1 to data-test2 and update the data
t.renameAttr('data-test1', 'data-test2');
result('Rename & change data<br>$("#test").renameAttr("data-test1", "data-test2");', 'data-test1', 'data-test2');
// rename data-test2 to data-test3 but don't update the data
t.renameAttr('data-test2', 'data-test3', false);
result('Rename without data change<br>$("#test").renameAttr("data-test2", "data-test3", false);', 'data-test2', 'data-test3');
});
<h1>jQuery Rename Attribute (renameAttr)</h1>
<div id="test" data-test1="testing"></div>
<div id="result"></div>
body {background: #333; color: #ddd;}
h1 { font-size: 120%; margin-bottom: 10px; }
h2 { font-size: 110%; color: #ddd; }
#result { color: #bbb; }
.und { color: #888; }
.tst { color: #0f0; }