如何使用 jQuery 更改 HTML 属性名称？答案

【问题标题】：How can I change HTML attribute names with jQuery?如何使用 jQuery 更改 HTML 属性名称？
【发布时间】：2010-09-23 22:46:15
【问题描述】：

我想在整个 html 文档中更改 class="testingCase" 的所有属性名称。

例如变化：

<a class="testingCase" href="#" title="name of testing case">Blabla</a>
<a class="testingCase" href="#" title="name of another testing case">Bloo</a>

对此：

<a class="testingCase" href="#" newTitleName="name of testing case">Blabla</a>`
<a class="testingCase" href="#" newTitleName="name of another testing case">Bloo</a>`

我正在考虑查找和替换，但对于如此简单的事情来说，这似乎有很多代码。有没有这个的jQuery函数或简单的方法？

【问题讨论】：

标签： jquery html

【解决方案1】：

在 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>

编辑：在位中添加使其仅选择具有 class="testingCase" 的 a 元素

【讨论】：

【解决方案2】：

我认为您不能更改属性名称，但您可以做的是：

获取所有带有title属性的<a>标签；
对于它们中的每一个，创建一个与标题具有相同值的 newTitleName 属性；
然后删除title属性。

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'); 

});

【讨论】：

【解决方案3】：

稍后，但是这个link 有一个很棒的 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-','') );
      }
    });
  }
});

例子

// $(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 );

我没有写这个。但我确实使用 JQ 1.10 进行了测试。代码来自链接。

【讨论】：

这个解决方案适合我的问题，当你需要像这样动态重命名属性时 $(this).attr({ 'data-parent' + file.idx: $(this).attr('data-parent_cbidx') }).removeAttr('data-parent_cbidx'); 这不起作用然后我改成这个 $(this).renameAttr('data-parent_cbidx', 'data-parent_' + file.idx, false);

【解决方案4】：

这是一个简单的 jquery 样式插件，它为您提供了一个 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)
        ;
};

还有this example 添加了删除旧属性数据的选项。

【讨论】：

【解决方案5】：

一个班轮

$('selector').replaceWith($('selector')[0].outerHTML.replace("oldName=","newName="));

当我需要从我的所有属性中去除前缀时，这对我很有用

$('selector').replaceWith($('selector')[0].outerHTML.(/prefix\-/g,""));

【讨论】：

【解决方案6】：

与@nickf 的答案相同，但代码更简洁：

$('a.testingCase[title]').each(function() {
    var curElem = $(this);
    curElem.attr("newTitleName", curElem.attr('title')).removeAttr('title');
});

【讨论】：

【解决方案7】：

它对我有用！

$('input[name="descricao"]').attr('name', 'title');

【讨论】：