मैं jQuery के साथ कोड टैग के अंदर एक पूर्व टैग कैसे जोड़ूं?

Question

मैं <code> टैग के अंदर एक <pre> टैग को जोड़ने के लिए कोड ब्लॉक फ़ॉर्मेट करने के लिए jQuery उपयोग करने के लिए, विशेष रूप से कोशिश कर रहा हूँ:

$(document).ready(function() { 
    $("code").wrapInner("<pre></pre>"); 
}); 

फ़ायरफ़ॉक्स स्वरूपण सही ढंग से लागू होता है, लेकिन आईई एक लाइन पर पूरे कोड ब्लॉक डालता है। मैं एक चेतावनी

alert($("code").html()); 

जोड़ देते हैं तो मुझे लगता है कि आईई पूर्व टैग में कुछ अतिरिक्त पाठ डाला गया है:

<PRE jQuery1218834632572="null"> 

अगर मैं पेज, संख्या jQuery परिवर्तन निम्नलिखित लोड करें।

अगर मैं wrapInner() के बजाय wrap() उपयोग करते हैं, <code> टैग बाहर <pre> रैप करने के लिए, दोनों IE और Firefox इसे सही ढंग से संभाल। लेकिन <code> के अंदर भी नहीं होना चाहिए?

मैं wrapInner() उपयोग करने के लिए है क्योंकि मैं तो सभी स्वरूपण को संभालने के लिए <pre> टैग करने के लिए एक CSS वर्ग में जोड़ सकते हैं पसंद करते हैं, लेकिन अगर मैं wrap() उपयोग करते हैं, मैं <pre> टैग और पाठ/font स्वरूपण में पेज स्वरूपण सीएसएस डाल करने के लिए है <code> टैग में, या फ़ायरफ़ॉक्स और आईई दोनों चोक। कोई बड़ा सौदा नहीं है, लेकिन मैं इसे यथासंभव सरल रखना चाहता हूं।

क्या किसी और को इसका सामना करना पड़ा है? क्या मैं कुछ भूल रहा हूँ?

Answer 1

block and inline तत्वों के बीच यह अंतर है। pre is a block level element। इसे code टैग के अंदर रखना कानूनी नहीं है, जो can only contain inline content है।

क्योंकि ब्राउजर को असली वेब पर जो भी गॉडफुल टैग सूप मिल सकता है, फ़ायरफ़ॉक्स आपको जो भी मतलब है, करने का प्रयास करता है। आईई इसे अलग-अलग संभालने के लिए होता है, जो कि spec द्वारा ठीक है; उस मामले में व्यवहार अनिर्दिष्ट है, क्योंकि यह कभी नहीं होना चाहिए।

• आप के बजाय pre साथ code तत्व की जगह सकते हैं? (ब्लॉक/इनलाइन मुद्दे के कारण, तकनीकी रूप से केवल तभी काम करना चाहिए जब तत्व an element with "flow" content के अंदर हों, लेकिन ब्राउज़र वही कर सकते हैं जो आप चाहते हैं।)
• यदि आप pre चाहते हैं तो यह पहले स्थान पर code तत्व क्यों है का व्यवहार?
• आप code तत्व pre की व्हाइटस्पेस को सीएसएस white-space: pre के साथ संरक्षित करने की शक्ति भी दे सकते हैं, लेकिन स्पष्ट रूप से IE 6 only honors that in Strict Mode।

Answer 2

क्या आप नवीनतम jQuery का उपयोग कर रहे हैं? क्या होगा अगर आप कोशिश

$("code").wrapInner(document.createElement("pre")); 

यह है किसी भी बेहतर है या आप एक ही परिणाम मिलता है?

Answer 3

बीटीडब्ल्यू मुझे नहीं पता कि यह संबंधित है या नहीं, लेकिन कोड टैग के अंदर पूर्व टैग सख्त मोड में मान्य नहीं होंगे।

Answer 4

मार्कपैस के अनुसार, HTML में CODE तत्व के अंदर एक PRE तत्व की अनुमति नहीं है। सबसे अच्छा समाधान है कि अपने एचटीएमएल कोड को < प्री> < कोड> (जिसका मतलब है कि एक पूर्व प्रारूपित ब्लॉक जिसमें कोड है) का उपयोग कोड ब्लॉक के लिए सीधे अपने एचटीएमएल में करना है।() यह रैप करने के लिए

Answer 5

आप html इस्तेमाल कर सकते हैं:

$('code').each(function(i,e) 
{ 
    var self = $(e); 
    self.html('<pre>' + self.html() + '</pre>'); 
}); 

ऊपर उल्लेख किया है, आप अपने html बदलते बेहतर होगा। लेकिन इस समाधान को काम करना चाहिए।