如何使用jQuery来更改元素types

我有下面的代码

<b class="xyzxterms" style="cursor: default; ">bryant keil bio</b> 

如何将b标签replace为h1标签，但保留所有其他属性和信息？

Answer 1

下面是你可以用jQuery做的一个方法：

 var attrs = { }; $.each($("b")[0].attributes, function(idx, attr) { attrs[attr.nodeName] = attr.nodeValue; }); $("b").replaceWith(function () { return $("<h1 />", attrs).append($(this).contents()); }); 

例如： http : //jsfiddle.net/yapHk/

更新 ，这是一个插件：

 (function($) { $.fn.changeElementType = function(newType) { var attrs = {}; $.each(this[0].attributes, function(idx, attr) { attrs[attr.nodeName] = attr.nodeValue; }); this.replaceWith(function() { return $("<" + newType + "/>", attrs).append($(this).contents()); }); }; })(jQuery); 

例如： http : //jsfiddle.net/mmNNJ/

Answer 2

不确定关于jQuery。 用普通的JavaScript你可以做到：

 var new_element = document.createElement('h1'), old_attributes = element.attributes, new_attributes = new_element.attributes; // copy attributes for(var i = 0, len = old_attributes.length; i < len; i++) { new_attributes.setNamedItem(old_attributes.item(i).cloneNode()); } // copy child nodes do { new_element.appendChild(element.firstChild); } while(element.firstChild); // replace element element.parentNode.replaceChild(new_element, element); 

DEMO

不知道这是如何跨浏览器兼容。

变化可能是：

 for(var i = 0, len = old_attributes.length; i < len; i++) { new_element.setAttribute(old_attributes[i].name, old_attributes[i].value); } 

有关更多信息，请参阅Node.attributes ^[MDN] 。

Answer 3

@雅科夫和@安德鲁·惠特克

这是一个进一步的改进，所以它可以同时处理多个元素。

 $.fn.changeElementType = function(newType) { var newElements = []; $(this).each(function() { var attrs = {}; $.each(this.attributes, function(idx, attr) { attrs[attr.nodeName] = attr.nodeValue; }); var newElement = $("<" + newType + "/>", attrs).append($(this).contents()); $(this).replaceWith(newElement); newElements.push(newElement); }); return $(newElements); }; 

Answer 4

只有我能想到的方式是手动复制一切： 例如jsfiddle

HTML

 <b class="xyzxterms" style="cursor: default; ">bryant keil bio</b> 

jQuery的/ JavaScript的

 $(document).ready(function() { var me = $("b"); var newMe = $("<h1>"); for(var i=0; i<me[0].attributes.length; i++) { var myAttr = me[0].attributes[i].nodeName; var myAttrVal = me[0].attributes[i].nodeValue; newMe.attr(myAttr, myAttrVal); } newMe.html(me.html()); me.replaceWith(newMe); }); 

Answer 5

@安德鲁·惠特克：我提出这个改变：

 $.fn.changeElementType = function(newType) { var attrs = {}; $.each(this[0].attributes, function(idx, attr) { attrs[attr.nodeName] = attr.nodeValue; }); var newelement = $("<" + newType + "/>", attrs).append($(this).contents()); this.replaceWith(newelement); return newelement; }; 

然后你可以做这样的事情： $('<div>blah</div>').changeElementType('pre').addClass('myclass');

Answer 6

我喜欢@AndrewWhitaker和其他人的想法，使用jQuery插件 – 添加changeElementType()方法。 但是一个插件就像一个黑盒子，没有关于代码的function，如果它是litle，并且工作正常…所以，性能是必需的，并且比代码更重要。

“纯粹的JavaScript”比jQuery有更好的性能 ：我认为@ FelixKling的代码比@ AndrewWhitaker和其他人有更好的性能。

---

这里有一个“纯Javavaccript”（和“纯DOM”）代码，封装成一个jQuery插件 ：

  (function($) { // @FelixKling's code $.fn.changeElementType = function(newType) { for (var k=0;k<this.length; k++) { var e = this[k]; var new_element = document.createElement(newType), old_attributes = e.attributes, new_attributes = new_element.attributes, child = e.firstChild; for(var i = 0, len = old_attributes.length; i < len; i++) { new_attributes.setNamedItem(old_attributes.item(i).cloneNode()); } do { new_element.appendChild(e.firstChild); } while(e.firstChild); e.parentNode.replaceChild(new_element, e); } return this; // for chain... $(this)? not working with multiple } })(jQuery); 

Answer 7

这里是我用来取代jQuery中的HTML标签的方法：

 // Iterate over each element and replace the tag while maintaining attributes $('b.xyzxterms').each(function() { // Create a new element and assign it attributes from the current element var NewElement = $("<h1 />"); $.each(this.attributes, function(i, attrib){ $(NewElement).attr(attrib.name, attrib.value); }); // Replace the current element with the new one and carry over the contents $(this).replaceWith(function () { return $(NewElement).append($(this).contents()); }); }); 

Answer 8

@ Jazzbo的答案返回了一个jQuery对象，其中包含一个jQuery对象数组，这是不可链接的。 我已经改变它，以便它返回一个更类似于$ .each将返回的对象：

  $.fn.changeElementType = function (newType) { var newElements, attrs, newElement; this.each(function () { attrs = {}; $.each(this.attributes, function () { attrs[this.nodeName] = this.nodeValue; }); newElement = $("<" + newType + "/>", attrs).append($(this).contents()); $(this).replaceWith(newElement); if (!newElements) { newElements = newElement; } else { $.merge(newElements, newElement); } }); return $(newElements); }; 

（也做了一些代码清理，所以它通过jslint。）