如何使用 jQuery 更改 HTML 属性名称？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/317170/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change HTML attribute names with jQuery?
提问by nickf
I would like to change all the names of the attributes where class="testingCase"throughout all my whole html document.
我想更改class="testingCase"整个 html 文档中的所有属性名称。
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?
我正在考虑查找和替换，但对于如此简单的事情来说，这似乎有很多代码。是否有针对此或简单方法的 jQuery 函数？
回答by nickf
There is no built-in method/function to "rename" an attribute in javascript, but you can create new attributes and remove other ones...
javascript 中没有用于“重命名”属性的内置方法/函数，但是您可以创建新属性并删除其他属性...
$('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 aelements with class="testingCase"
编辑：添加了使其仅选择aclass="testingCase" 的元素的位
回答by e-satis
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.
- 获取所有
<a>带有 title 属性的标签； - 为它们中的每一个，创建一个与标题具有相同值的 newTitleName 属性；
- 然后删除标题属性。
JQuery let you do that with builtin functions this way :
JQuery 允许您通过以下方式使用内置函数执行此操作：
/* 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');
});
回答by trgraglia
A little later but this linkhas a great jquery function extension:
稍后，但此链接有一个很棒的 jquery 函数扩展：
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.
我没有写这个。但我用 JQ 1.10 进行了测试。代码来自链接。
回答by jfrprr
Here's a simple jquery-style plugin that gives you a renameAttr method:
这是一个简单的 jquery-style 插件，它为您提供了一个 renameAttr 方法：
// 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 examplewhich adds an option to remove the data for the old attribute.
还有这个例子，它添加了一个选项来删除旧属性的数据。
回答by chiliNUT
One liner
一个班轮
$('selector').replaceWith($('selector')[0].outerHTML.replace("oldName=","newName="));
worked great for me when I needed to strip a prefix from all of my attributes
当我需要从我的所有属性中去除前缀时，对我来说非常有用
$('selector').replaceWith($('selector')[0].outerHTML.(/prefix\-/g,""));
回答by warch
same answer as @nickf but cleaner code:
与@nickf 相同的答案，但代码更简洁：
$('a.testingCase[title]').each(function() {
var curElem = $(this);
curElem.attr("newTitleName", curElem.attr('title')).removeAttr('title');
});
回答by Renee Maksoud
It works for me!
这个对我有用！
$('input[name="descricao"]').attr('name', 'title');
