Как изменить имена атрибутов HTML с помощью jQuery?

Я хотел бы изменить все имена атрибутов, где 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 для этого или простого метода?

Ответ 1

Я не думаю, что вы можете "переименовать" атрибут, но вы можете создавать новые атрибуты и удалять другие...

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

Изменить: добавлено в бит, что делает его только выбором a элементов с помощью class="testingCase"

Ответ 2

Я не думаю, что вы можете изменить имя атрибута, но что вы можете сделать:

получить все теги <a> с атрибутом title;
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'); 

});

Ответ 3

Немного позже, но ссылка имеет большое расширение функции 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. КОД ИЗ ЛИНИИ.

Ответ 4

Вот простой плагин 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)
        ;
};

Существует также этот пример, который добавляет параметр для удаления данных для старого атрибута.

Ответ 5

Один вкладыш

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

работал отлично для меня, когда мне нужно было снять префикс из всех моих атрибутов

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