jQuery를 사용하여 한 태그를 다른 태그로 바꾸기

골:

jQuery를 사용하여 다음 항목을 모두 바꾸려고합니다.

<code> ... </code>

와:

<pre> ... </pre>

내 솔루션 :

나는 다음과 같은 것을 얻었습니다.

$('code').replaceWith( "<pre>" + $('code').html() + "</pre>" );

내 솔루션의 문제 :

그러나 문제는 (두 번째, 세 번째, 네 번째 등) "code"태그 사이의 모든 것을 첫 번째 "code"태그 사이의 콘텐츠로 대체한다는 것 입니다.

예 :

<code> A </code>
<code> B </code>
<code> C </code>

된다

<pre> A </pre>
<pre> A </pre>
<pre> A </pre>

나는 "this"와 어떤 종류의 기능을 사용해야한다고 생각하지만, 나는 아직도 배우고 있고, 해결책을 모으는 방법을 정말로 이해하지 못하는 것이 두렵다.

.replaceWith ^[문서]에 함수를 전달할 수 있습니다 .

$('code').replaceWith(function(){
    return $("<pre />", {html: $(this).html()});
});

함수 내에서 this현재 처리 된 code요소를 참조합니다.

데모

업데이트 : 없습니다 더 큰 성능 차이가 있지만, 경우에 code요소들을 더 정확하기 느낌 직렬화하는 대신 자녀를 추가, 다른 HTML의 자녀가 :

$('code').replaceWith(function(){
    return $("<pre />").append($(this).contents());
});

이것은 훨씬 더 좋습니다.

$('code').contents().unwrap().wrap('<pre/>');

물론 Felix Kling의 솔루션 은 약 2 배 빠릅니다 .

항상 첫 번째 code콘텐츠를 얻는 것이 맞습니다.$('code').html()사용하는 곳마다 항상 첫 번째 요소를 참조하기 항상 습니다.

대신 .each을 사용하여 모든 요소를 ​​반복하고 각 요소를 개별적으로 변경할 수 있습니다 .

$('code').each(function() {
    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
    // this function is executed for all 'code' elements, and
    // 'this' refers to one element from the set of all 'code'
    // elements each time it is called.
});

이 시도:

$('code').each(function(){

    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );

});

http://jsfiddle.net/mTGhV/

이건 어때요?

$('code').each(function () {
    $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
});

Felix의 대답을 바탕으로합니다.

$('code').replaceWith(function() {
    var replacement = $('<pre>').html($(this).html());
    for (var i = 0; i < this.attributes.length; i++) {
        replacement.attr(this.attributes[i].name, this.attributes[i].value);
    }
    return replacement;
});

그러면 code대체 pre태그 의 태그 속성이 재현됩니다 .

편집 : 이것은 다른 태그 code안에 있는 태그 도 대체 합니다.innerHTMLcode

function replace(thisWith, that) {
    $(thisWith).replaceWith(function() {
        var replacement = $('<' + that + '>').html($(this).html());
        for (var i = 0; i < this.attributes.length; i++) {
            replacement.attr(this.attributes[i].name, this.attributes[i].value);
        }
        return replacement;
    });
    if ($(thisWith).length>0) {
        replace(thisWith, that);
    }
}

replace('code','pre');

jQuery 1.4.2부터 :

$('code').replaceWith(function(i,html) {
  return $('<pre />').html(html);
});​

그런 다음 새 요소를 선택할 수 있습니다.

$('pre').css('color','red');

출처 : http://api.jquery.com/replaceWith/#comment-45493689

jsFiddle : http://jsfiddle.net/k2swf/16/

바닐라 자바 ​​스크립트를 사용했다면 다음과 같이 할 수 있습니다.

• 새 요소 만들기
• 이전 요소의 자식을 새 요소로 이동
• 이전 요소 앞에 새 요소 삽입
• 이전 요소 제거

다음은이 프로세스에 해당하는 jQuery입니다.

$("code").each(function () {
    $("<pre></pre>").append(this.childNodes).insertBefore(this);
    $(this).remove();
});

다음은 jsperf URL입니다.
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

PS : 사용하는 모든 솔루션 .html()또는 .innerHTML입니다 파괴 .

짧고 쉬운 또 다른 방법 :

$('code').wrapInner('<pre />').contents();

$('code').each(function(){
    $(this).replaceWith( "<pre>" + $(this).html()  + "</pre>" );
    });

가장 좋고 깨끗한 방법.

jQuery의 html 기능을 사용할 수 있습니다. 다음은 코드의 모든 속성을 유지하면서 코드 태그를 사전 태그로 대체하는 샘플입니다.

    $('code').each(function() {
        var temp=$(this).html();
        temp=temp.replace("code","pre");
        $(this).html(temp);
    });

이는 이전 태그의 모든 속성을 유지하면서 교체해야하는 모든 html 요소 태그 세트와 함께 작동 할 수 있습니다.

jquery플러그인을 만들어 속성도 유지합니다.

$.fn.renameTag = function(replaceWithTag){
  this.each(function(){
        var outerHtml = this.outerHTML;
        var tagName = $(this).prop("tagName");
        var regexStart = new RegExp("^<"+tagName,"i");
        var regexEnd = new RegExp("</"+tagName+">$","i")
        outerHtml = outerHtml.replace(regexStart,"<"+replaceWithTag)
        outerHtml = outerHtml.replace(regexEnd,"</"+replaceWithTag+">");
        $(this).replaceWith(outerHtml);
    });
    return this;
}

용법:

$('code').renameTag('pre')

여기에 제공된 모든 대답은 (질문 예에서 알 수 있듯이) 태그에 속성이 없다고 가정합니다. 수락 된 답변이 이에 대해 실행되는 경우 :

<code class='cls'>A</code>

대체 될 경우

<pre>A</pre>

속성도 유지하려면 어떻게해야하나요? 태그를 교체한다는 것은 무엇을 의미합니까? 이것이 해결책입니다.

$("code").each( function(){
    var content = $( "<pre>" );

    $.each( this.attributes, function(){ 
         content.attr( this.name, this.value );
    } );

    $( this ).replaceWith( content );
} );