jQuery / javascript替换标签类型

是否有一种简单的方法可以遍历所有td标签并将其更改为th？ （等等）。

我目前的方法是用th包装然后删除td，但后来我失去了其他属性等。

Answer 1

完全未经测试，但给这个旋转：

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

我正在寻找并看着它，我想不出它为什么不起作用的原因！

1）遍历每个td元素
2）创建一个新的元素
3）对于每个td，循环其每个属性
4）将该属性和值添加到新的元素
5）一旦所有属性都到位，在td之后立即将元素添加到DOM，并删除td

编辑：工作正常： http ： //jsbin.com/uqofu3/edit

Answer 2

jQuery.replaceTagName

以下是用于替换DOM元素的标记名称的jQuery插件。

资源

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

缩小来源

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

用法

在jQuery之后在javascript中包含上面的缩小源。

然后你可以使用这样的插件：

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

或者在你的情况下：

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

jQuery选择器按预期工作

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

更多资源

jsFiddle与Qunit测试

Answer 3

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

或纯DOM

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

DOM总是更快： http ： //jsperf.com/replace-tag-names

Answer 4

这可能有用，但我还没有广泛测试过：

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

我希望它在某种程度上有所帮助。

Answer 5

稍微添加@GlenCrawford答案，还可以使用以下行保留内部文本：

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

现在都在一起了：

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

Answer 6

那么这个问题已经很老了但是这无论如何都有帮助：唯一真正按预期工作的jQuery插件（你不能在另一个中重用返回的对象，例如添加属性）：

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

除了基本的$("td").replaceTagName("th"); 你也可以链接如$("td").replaceTagName("th").attr("title","test");

缩小版：

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

Answer 7

这比@ GlenCrawford的答案更清晰，并且还复制了替换元素的子元素。

 $('td').each(function(){ var newElem = $('', {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); }); 

Answer 8

 document.body.innerHTML=document.body.innerHTML.replace(/(\)|(\)/gi,function(x){return x.replace("td","th");})