एक टैग को दूसरे के साथ बदलने के लिए jQuery का उपयोग करना

101

लक्ष्य:

JQuery का उपयोग करते हुए, मैं सभी घटनाओं को बदलने की कोशिश कर रहा हूं:

<code> ... </code>

साथ में:

<pre> ... </pre>

मेरा समाधान:

मुझे निम्नलिखित के रूप में मिला है,

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

मेरे समाधान के साथ समस्या:

लेकिन मुद्दों है कि यह सब कुछ की जगह है (दूसरा, तीसरा, चौथा, आदि) "कोड" के बीच सामग्री के साथ टैग के बीच पहले "कोड" टैग।

जैसे

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

हो जाता है

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

मुझे लगता है कि मुझे "इस" और कुछ प्रकार के फ़ंक्शन का उपयोग करने की आवश्यकता है, लेकिन मुझे डर है कि मैं अभी भी सीख रहा हूं और वास्तव में समझ में नहीं आता कि एक साथ समाधान कैसे निकालना है।

javascript jquery replace

— जॉन
स्रोत

रैप-अनप्रॉप्ट सॉल्यूशन को अब जोंस फिक्स्ड करें - इसे देखें;)

— जेन्स रोलैंड

157

आप एक समारोह को .replaceWith ^{[डॉक्स]} पास कर सकते हैं :

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

फ़ंक्शन के अंदर, thisवर्तमान में संसाधित codeतत्व को संदर्भित करता है ।

डेमो

अद्यतन: नहीं है कोई बड़ी प्रदर्शन अंतर है, लेकिन मामले में codeतत्वों, अन्य HTML बच्चे हैं बच्चों जोड़कर serializing उन्हें और अधिक सही होने के लिए लगता है के बजाय:

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

— फेलिक्स क्लिंग
स्रोत

1

यह सबसे सुंदर समाधान प्रतीत होता है, मैं मानता हूँ कि मुझे समझ में नहीं आता कि क्या रिप्लेसमेंट फ़ंक्शन के अंदर चल रहा है। और सुनना अच्छा लगेगा। यानी कैसे खुलने और बंद होने वाले टैग असाइन किए जा रहे हैं? <पूर्व /> में स्थान को पूरा करता है?

— जों

2

@ जों: यह नए तत्वों को बनाने के लिए एक छोटा हाथ है। अधिक जानकारी यहां पाई जा सकती है: api.jquery.com/jQuery/#jQuery2 । jQuery सभी तत्वों पर लूप करता है और उनमें से प्रत्येक के लिए फ़ंक्शन निष्पादित करता है (वही जो .eachकर रहा है)।

— फेलिक्स क्लिंग

@ जोन: लेकिन फिर से जेन्स के समाधान की जांच करें, उन्होंने इसे ठीक किया।

— फेलिक्स क्लिंग

1

एक अच्छी चाल के लिए +1 - इसका उपयोग केवल साधारण टैग-फॉर-टैग प्रतिस्थापन से बहुत अधिक के लिए किया जा सकता है।

— जेन्स रोलैंड

@FelixKling यह कोड टैग की विशेषताओं को अधिलेखित नहीं करेगा?

— तेवतिया

80

यह बहुत अच्छा है:

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

हालांकि माना जाता है कि फेलिक्स क्लिंग का समाधान लगभग दोगुना है :

— जेन्स रोलैंड
स्रोत

4

एक आकर्षण की तरह काम किया, मेरी आँखों के सामने यह सबसे कुशल समाधान लगता है। :)

— जॉन

अहा। हाँ, तुम लोग सही थे। यह मेरे लिए भी काम नहीं किया। उस पकड़ने के लिए धन्यवाद!

— जॉन

1

FWIW, $('code').children()उपरोक्त उदाहरण के लिए एक खाली jQuery वस्तु लौटाएगा, क्योंकि codeतत्वों में कोई बाल तत्व नोड नहीं है। हालांकि यह काम करता है अगर बाल तत्व हैं।

— फेलिक्स क्लिंग

1

फिक्स्ड - सच है, जब सामग्री में एक एकल पाठ नोड होता है, children()तो काम नहीं करेगा। contents()इसके बजाय का उपयोग पूरी तरह से काम करता है। jsfiddle.net/7Yne9

— जेन्स रोलैंड

1

यहाँ एक jsperf संस्करण है जो पृष्ठ को नहीं तोड़ता है: jsperf.com/substituting-one-tag-for-another-with-jquery/2 और आप देखते हैं कि गति का अंतर अब इतना बड़ा नहीं है। आपका समाधान धीमा है क्योंकि आप प्रति तत्व दो डोम हेरफेर करते हैं: unwrapमाता-पिता को निकालता है और बच्चों को पेड़ wrapसे जोड़ता है , उन्हें फिर से अलग करता है और एक नया माता-पिता जोड़ता है।

— फेलिक्स क्लिंग

26

यह सही है कि आप हमेशा पहली 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.
});

— pimvdb
स्रोत

12

इसे इस्तेमाल करे:

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

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

});

http://jsfiddle.net/mTGhV/

— Kokos
स्रोत

वाह। आप लोग एक दूसरे के 2 सेकंड के भीतर एक ही समाधान के साथ आए। छोटे स्वरूपण अंतर हैं। मुझे यकीन नहीं है कि कौन सा एक को उखाड़ना है - मुझे वास्तव में फंक्शन के जवाब में और () के बीच की जगह पसंद नहीं है और कोकोस के उत्तर में खाली जगह की 2 पंक्तियां सुंदर हैं। + () के बीच एक स्थान होना चाहिए। और {

— माइकल बाइल्स्ट्रा

11

इस बारे में कैसा है?

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

— तै-सुंग शिन
स्रोत

6

फेलिक्स के जवाब पर बिल्डिंग।

$('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टैग को भी बदल देगा जो innerHTMLअन्य codeटैग के अंदर हैं ।

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');

— tewathia
स्रोत

2

अब तक का सबसे अच्छा जवाब। दूसरे वे सभी बहुत समान हैं जो वास्तव में अजीब है कि लोग उन्हें बढ़ाते हैं। गुण के बारे में सोचने वाला एकमात्र व्यक्ति होने के लिए बधाई।

— गुइलेरमे डेविड दा कोस्टा

3

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/

— साइमन
स्रोत

2

यदि आप वेनिला जावास्क्रिप्ट का उपयोग कर रहे थे तो आप करेंगे:

नया तत्व बनाएं
पुराने तत्व के बच्चों को नए तत्व में स्थानांतरित करें
पुराने से पहले नया तत्व डालें
पुराने तत्व को हटा दें

यहाँ इस प्रक्रिया के बराबर 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

पुनश्च: यह है कि उपयोग सभी समाधान .html()या .innerHTMLकर रहे हैं विनाशकारी ।

— सलमान ए
स्रोत

2

एक और छोटा और आसान तरीका:

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

— फैबियन वॉन एलर्ट्स
स्रोत

0

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

सबसे अच्छा और साफ तरीका।

— Nimek
स्रोत

0

आप jQuery के HTML फ़ंक्शन का उपयोग कर सकते हैं। नीचे एक नमूना एक कोड टैग को पूर्व टैग के साथ कोड की सभी विशेषताओं को बनाए रखते हुए प्रतिस्थापित किया गया है।

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

यह HTML तत्व टैग के किसी भी सेट के साथ काम कर सकता है जिसे पिछले टैग की सभी विशेषताओं को बनाए रखते हुए स्वैप करने की आवश्यकता है।

— अर्नब सी।
स्रोत

0

बनाया 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')

— JagsSparrow
स्रोत

0

यहां दिए गए सभी उत्तर मानते हैं (जैसा कि प्रश्न उदाहरण इंगित करता है) कि टैग में कोई विशेषता नहीं है। यदि स्वीकृत उत्तर इस पर चलाया जाता है:

<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 );
} );

— पैट्रिक
स्रोत

मुझे पता है कि यह कुछ साल पुराना है, लेकिन मैंने सोचा था कि मैं उल्लेख करूंगा ... आप पिछले तत्व से html रखना भूल गए। आपके कोड स्निपेट में आप केवल एक नए तत्व का निर्माण कर रहे हैं, जिसमें बिना किसी भी बच्चे को कॉपी किए बिना विशेषताओं के साथ एक नया तत्व है।

— एक मित्र

कि जोड़कर किए जाएंगेcontent.html( this.html )

— पैट्रिक