Bir etiketi diğeriyle değiştirmek için jQuery kullanma

Hedef:

JQuery kullanarak, şunların tüm oluşumlarını değiştirmeye çalışıyorum:

<code> ... </code>

ile:

<pre> ... </pre>

Çözümüm:

Şu kadar ileri gittim,

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

Çözümümle ilgili sorun:

ancak sorun, (ikinci, üçüncü, dördüncü vb.) "kod" etiketleri arasındaki her şeyi ilk "kod" etiketleri arasındaki içerikle değiştirmesidir .

Örneğin

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

olur

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

Sanırım "bu" ve bir tür işlev kullanmam gerekiyor ama korkarım hala öğreniyorum ve bir çözümü nasıl bir araya getireceğimi gerçekten anlamıyorum.

Bir işlevi .replaceWith ^{[dokümanlar] '} a aktarabilirsiniz :

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

İşlevin içinde, thisşu anda işlenen codeöğeyi ifade eder .

DEMO

Güncelleme: Orada hiçbir büyük performans farkı , ama durumda codeelemanları onları daha doğru olduğu hissediyor seri hale yerine çocukları ekleyerek, diğer HTML çocuk sahibi:

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

Bu çok daha hoş:

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

Kuşkusuz Felix Kling'in çözümü yaklaşık iki kat daha hızlı :

Her zaman ilkini elde edeceğiniz doğru code$('code').html() ilk öğenin içeriğini , çünkü onu nerede kullanırsanız kullanın her zaman ilk öğeye atıfta bulunacaksınız.

Bunun yerine, .eachtüm öğeleri yinelemek ve her birini ayrı ayrı değiştirmek için kullanabilirsiniz :

$('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.
});

Bunu dene:

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

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

});

http://jsfiddle.net/mTGhV/

Buna ne dersin?

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

Felix'in cevabını geliştirmek.

$('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;
});

Bu code, değiştirilen etiketlerin özniteliklerini yeniden oluşturacaktır.pre etiketlerindeki .

Düzenleme: Bu , diğer etiketlerin codeiçindeki etiketlerin bile yerini alacaktır .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'den itibaren:

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

Daha sonra yeni öğeleri seçebilirsiniz:

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

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

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

Vanilya JavaScript kullanıyorsanız şunları yaparsınız:

• Yeni öğeyi oluşturun
• Eski öğenin alt öğelerini yeni öğeye taşıyın
• Yeni öğeyi eskisinin önüne ekleyin
• Eski öğeyi kaldırın

İşte bu işlemin jQuery eşdeğeri:

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

İşte jsperf URL'si:
http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

Not: Kullanım Bütün çözümler .html()veya .innerHTMLolan yıkıcı .

Başka bir kısa ve kolay yol:

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

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

En iyi ve temiz yol.

JQuery'nin html işlevini kullanabilirsiniz. Aşağıda, kodun tüm özniteliklerini korurken, bir kod etiketini bir ön etiketle değiştiren bir örnek verilmiştir.

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

Bu, önceki etiketin tüm özniteliklerini korurken takas edilmesi gereken herhangi bir html öğe etiketi kümesiyle çalışabilir.

Yapılan jqueryda özelliklerini koruyarak, eklentisi.

$.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;
}

Kullanım:

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

Burada verilen tüm yanıtlar (soru örneğinin gösterdiği gibi) etiketinde hiçbir öznitelik olmadığını varsayar. Kabul edilen cevap bunun üzerine çalıştırılırsa:

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

ile değiştirilecekse

<pre>A</pre>

Ya öznitelikleri de korumak istiyorsanız - bir etiketi değiştirmenin anlamı nedir ...? Çözüm şudur:

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

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

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