我有以下代码
<b class="xyzxterms" style="cursor: default; ">bryant keil bio</b>
我如何将b
标签替换为h1
标签但保留所有其他属性和信息?
我有以下代码
<b class="xyzxterms" style="cursor: default; ">bryant keil bio</b>
我如何将b
标签替换为h1
标签但保留所有其他属性和信息?
这是您可以使用 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/
不确定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);
不确定这是如何跨浏览器兼容的。
一个变化可能是:
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]。
@jakov 和 @Andrew Whitaker
这是进一步的改进,因此它可以一次处理多个元素。
$.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);
};
@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。)
我能想到的唯一方法是手动复制所有内容:example 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);
});