jQuery/javascript替换标签类型

Question

是否有一种简单的方法可以循环遍历所有td标记并将其更改为th？(等等).

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

Answer 1

jQuery.replaceTagName

以下是一个jQuery插件,用于替换DOM元素的标记名称.

资源

(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 2

完全未经测试,但给这个旋转:

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

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

1)遍历每个td元素
2)为每个td 创建一个新的元素
3),遍历其每个属性
4)将该属性和值添加到新的元素
5)一旦所有属性到位,添加在td之后的DOM元素,并删除td

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

Answer 3

$("td").each(function() {
  var tmp = $('<div/>').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<allFound.length; i++) {
    var tmp = document.createElement(newTagName);
    for (var k=0; k<allFound[i].attributes.length; k++) {
      var name = allFound[i].attributes[k].name;
      var val = allFound[i].attributes[k].value;
      tmp.setAttribute(name,val);
    }
    tmp.innerHTML = allFound[i].innerHTML;
    allFound[i].parentNode.insertBefore(tmp, allFound[i]);
    allFound[i].parentNode.removeChild(allFound[i]);
  }
}

replaceElm('td','th',document.getElementsByTagName('table')[0]);

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