다음 코드가 있습니다.
<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를 전달합니다.)
답변
내가 생각할 수있는 유일한 방법은 모든 것을 수동으로 복사하는 것입니다. 예 jsfiddle
HTML
<b class="xyzxterms" style="cursor: default; ">bryant keil bio</b>
Jquery / 자바 스크립트
$(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);
});
답변
@Andrew Whitaker :이 변경을 제안합니다.
$.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');
답변
나는 @AndrewWhitaker와 다른 사람들이 jQuery 플러그인을 사용하여 changeElementType()
메소드 를 추가한다는 아이디어를 좋아합니다 . 하지만 플러그인은 블랙 박스와 같으며 코드에 상관없이 작지만 잘 작동한다면 성능이 필요하고 코드보다 가장 중요합니다.
“Pure javascript”는 jQuery 보다 성능 이 더 좋습니다 . @FelixKling의 코드가 @AndrewWhitaker와 다른 것보다 성능이 더 좋다고 생각합니다.
다음은 jQuery 플러그인으로 캡슐화 된 “순수한 Javavascript”(및 “순수한 DOM”) 코드입니다 .
(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);