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

2021/01/29 06:51 · jquery ·  · 0评论

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

例如:

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

没有内置的方法/函数可以在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>

编辑:添加到仅选择aclass =“ testingCase”元素的位中

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

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

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

});

稍后,但是此链接具有出色的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有关。该代码来自链接。

这是一个简单的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)
        ;
};

还有这个例子中它增加了一个选项来删除数据的旧的属性。

一支班轮

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

当我需要从所有属性中删除前缀时,对我来说非常有用

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

与@nickf相同的答案,但代码更简洁:

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

这个对我有用!

$('input[name="descricao"]').attr('name', 'title');
本文地址:http://jquery.askforanswer.com/ruheshiyongjquerygenggaihtmlshuxingmingcheng.html
文章标签: ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!