Comment puis-je modifier les noms d'attributs HTML avec jQuery?

Question

Je voudrais changer tous les noms des attributs où class="testingCase" dans tout mon document html entier.

par exemple. Changement:

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

à ceci:

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

Je pensais à une recherche et de remplacement, mais cela semble beaucoup de code pour quelque chose si facile. Y at-il une fonction jQuery pour ceci ou une méthode simple?

Answer 1

Je ne pense pas que vous pouvez « renommer » un attribut, mais vous pouvez créer de nouveaux attributs et de supprimer autres ...

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

Edit: ajoutée dans le bit qui permet de ne sélectionner que a éléments avec class="testingCase"

Answer 2

Je ne pense pas que vous pouvez changer un nom d'attribut, mais ce que vous pouvez faire est:

• obtenir tous les tags avec <a> un attribut de titre;
• pour chacun d'eux, créez un nouvel attribut TitreNom avec la même valeur que le titre;
• puis supprimez l'attribut title.

JQuery vous permettent de faire cela avec fonctions intégrées de cette façon:

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

}); 

Answer 3

Voici un plugin simple style jquery qui vous donne une méthode 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) 
     ; 
}; 

Il est également this example qui ajoute une option pour supprimer les données de l'ancien attribut.

Answer 4

Un peu plus tard, mais ce link a une grande extension de la fonction 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-','')); 
      } 
    }); 
  } 
}); 

Exemple

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

JE N'écrire ceci. Mais j'ai fait le test est avec JQ 1.10. LE CODE EST DU LIEN.

Answer 5

Une doublure

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

fonctionnait très bien pour moi quand je avais besoin de dépouiller un préfixe de tous mes attributs

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