如何使用jQuery更改HTML属性名称?

时间:2008-11-25 12:28:08

标签: jquery html

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

e.g。变化:

<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函数?

7 个答案:

答案 0 :(得分:36)

我认为您不能“重命名”某个属性,但您可以创建新属性并删除其他属性...

$('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>

修改:在该位中添加了仅使用a

选择class="testingCase"个元素的位

答案 1 :(得分:9)

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

  • 获取具有title属性的所有<a>标记;
  • foreach,创建一个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'); 

});

答案 2 :(得分:5)

稍晚,但这个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。该代码来自链接。

答案 3 :(得分:2)

这是一个简单的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添加了删除旧属性数据的选项。

答案 4 :(得分:1)

一个班轮

$('selector').replaceWith($('selector')[0].outerHTML.replace("oldName=","newName="));
当我需要从所有属性中删除前缀

时,

对我很有帮助

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

答案 5 :(得分:-1)

与@nickf相同的答案,但更清晰的代码:

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

答案 6 :(得分:-1)

对我有用!

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