jQuery / javascript sostituiscono il tipo di tag

C’è un modo semplice per scorrere tutti i tag td e cambiarli in th? (eccetera).

Il mio attuale approccio sarebbe quello di avvolgerli con il th e quindi rimuovere il td, ma poi perdo altre proprietà ecc.

Completamente non testato, ma dando un vortice:

 $("td").each(function(index) { var thisTD = this; var newElement = $(""); $.each(this.attributes, function(index) { $(newElement).attr(thisTD.attributes[index].name, thisTD.attributes[index].value); }); $(this).after(newElement).remove(); }); 

Sto guardando e guardandolo, e non riesco a pensare a una ragione per cui non funzionerebbe!

1) loop attraverso ogni elemento td
2) crea un nuovo elemento th
3) per ciascuno di questi td, loop su ciascuno dei suoi attributi
4) aggiungi quell’attributo e il valore al nuovo elemento th
5) una volta che tutti gli attributi sono a posto, aggiungi l’elemento al DOM subito dopo il td e rimuovi il td

Modifica: funziona bene: http://jsbin.com/uqofu3/edit

jQuery.replaceTagName

Il seguente è un plugin jQuery per sostituire il nome del tag degli elementi DOM.

fonte

 (function($) { $.fn.replaceTagName = function(replaceWith) { var tags = [], i = this.length; while (i--) { var newElement = document.createElement(replaceWith), thisi = this[i], thisia = thisi.attributes; for (var a = thisia.length - 1; a >= 0; a--) { var attrib = thisia[a]; newElement.setAttribute(attrib.name, attrib.value); }; newElement.innerHTML = thisi.innerHTML; $(thisi).after(newElement).remove(); tags[i] = newElement; } return $(tags); }; })(window.jQuery); 

Fonte minificata

 (function(e){e.fn.replaceTagName=function(t){var n=[],r=this.length;while(r--){var i=document.createElement(t),s=this[r],o=s.attributes;for(var u=o.length-1;u>=0;u--){var a=o[u];i.setAttribute(a.name,a.value)}i.innerHTML=s.innerHTML;e(s).after(i).remove();n[r]=i}return e(n)}})(window.jQuery); 

uso

Includi la sorgente minificata in alto nel tuo javascript dopo jQuery.

Quindi puoi usare il plugin in questo modo:

 $('div').replaceTagName('span'); // replace all divs with spans 

O nel tuo caso questo:

 $('td').replaceTagName('th'); 

I selettori jQuery funzionano come previsto

 $('.replace_us').replaceTagName('span'); // replace all elements with "replace_us" class with spans $('#replace_me').replaceTagName('div'); // replace the element with the id "replace_me" 

Altre risorse

jsFiddle con i test di Qunit

 $("td").each(function() { var tmp = $('
').append($(this).clone(true)).html().replace(/td/i,'th'); $(this).after(tmp).remove(); });

o puro DOM

 function replaceElm(oldTagName, newTagName, targetElm) { var target = targetElm || window.document; var allFound = target.getElementsByTagName(oldTagName); for (var i=0; i 

DOM è sempre più veloce: http://jsperf.com/replace-tag-names

Questo potrebbe funzionare, ma non l’ho testato estesamente:

 var tds = document.getElementsByTagName("td"); while(tds[0]){ var t = document.createElement("th"); var a = tds[0].attributes; for(var i=0;i 

Spero che aiuti in qualche modo.

Leggera aggiunta alla risposta @GlenCrawford, per preservare anche il testo interno con la linea:

 newElement.text($(value).text()); 

Adesso tutti insieme:

 $("td").each(function(index) { var thisTD = this; var newElement = $(""); newElement.text($(value).text()); $.each(this.attributes, function(index) { $(newElement).attr(thisTD.attributes[index].name, thisTD.attributes[index].value); }); $(this).after(newElement).remove(); }); 

Bene, questa domanda è piuttosto vecchia, ma ciò potrebbe comunque essere d’aiuto: l’unico plug-in di jQuery funziona come previsto (non è ansible riutilizzare l’object restituito nell’altro, per aggiungere attributi ad esempio):

 jQuery.fn.extend({ replaceTagName: function(replaceWith) { var tags=[]; this.each(function(i,oldTag) { var $oldTag=$(oldTag); var $newTag=$($("
").append($oldTag.clone(true)).html().replace(new RegExp("^<"+$oldTag.prop("tagName"),"i"),"<"+replaceWith)); $oldTag.after($newTag).remove(); tags.push($newTag.get(0)); }); return $(tags); } });

Oltre al basic $("td").replaceTagName("th"); puoi anche effettuare chiamate a catena come $("td").replaceTagName("th").attr("title","test");

Versione minificata:

 jQuery.fn.extend({replaceTagName:function(a){var b=[];this.each(function(d,c){var e=$(c);var f=$($("
").append(e.clone(true)).html().replace(new RegExp("^<"+e.prop("tagName"),"i"),"<"+a));e.after(f).remove();b.push(f.get(0))});return $(b)}});

Questo è un po ‘più pulito della risposta di @ GlenCrawford e copia inoltre i figli dell’elemento sostituito.

 $('td').each(function(){ var newElem = $('', {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); }); 
 document.body.innerHTML=document.body.innerHTML.replace(/(\)|(\)/gi,function(x){return x.replace("td","th");})