How can I change HTML attribute names with jQuery?
I would like to change all the names of the attributes where class="testingCase"
throughout all my whole html document.
e.g. Change:
<a class="testingCase" href="#" title="name of testing case">Blabla</a>
<a class="testingCase" href="#" title="name of another testing case">Bloo</a>
To this:
<a class="testingCase" href="#" newTitleName="name of testing case">Blabla</a>`
<a class="testingCase" href="#" newTitleName="name of another testing case">Bloo</a>`
I was thinking of a find and replace but that seems a lot of code for something so easy. Is there a jQuery function for this or a simple method?
There is no built-in method/function to "rename" an attribute in javascript, but you can create new attributes and remove other ones...
$('a.testingCase[title]').each(function() {
var $t = $(this);
$t.attr({
newTitleName: $t.attr('title')
})
.removeAttr('title');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="testingCase" href="#" title="name of testing case">Blabla</a>
<a class="testingCase" href="#" title="name of another testing case">Bloo</a>
Edit: added in the bit that makes it only select a
elements with class="testingCase"
I don't think you can change an attribute name but what you can do is :
- get all the
<a>
tags with a title attribute; - foreach of them, create a newTitleName attribute with the same value as the title;
- then delete the title attribute.
JQuery let you do that with builtin functions this way :
/* get all <a> with a "title" attribute that are testingCase
then apply an anonymous function on each of them */
$('a.testingCase[title]').each(function() {
/* create a jquery object from the <a> DOM object */
var $a_with_title = $(this);
/* add the new attribute with the title value */
$a_with_title.attr("newTitleName", $a_with_title.getAttribute('title'));
/* remove the old attribute */
$a_with_title.removeAttr('title');
});
A little later but this link has a great jquery function extension:
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 );
// remove original data
if (removeData !== false){
jQuery.removeData( this, name.replace('data-','') );
}
});
}
});
Example
// $(selector).renameAttr(original-attr, new-attr, removeData);
// removeData flag is true by default
$('#test').renameAttr('data-test', 'data-new' );
// removeData flag set to false will not remove the
// .data("test") value
$('#test').renameAttr('data-test', 'data-new', false );
I DID NOT WRITE THIS. BUT I DID TEST IS WITH JQ 1.10. THE CODE IS FROM THE LINK.
Here's a simple jquery-style plugin that gives you a renameAttr method:
// Rename an entity attribute
jQuery.fn.renameAttr = function(oldName, newName) {
var args = arguments[0] || {};
var o = $(this[0])
o
.attr(
newName, o.attr(oldName)
)
.removeAttr(oldName)
;
};
There is also this example which adds an option to remove the data for the old attribute.