मैं HTML का उपयोग कर पाठ के ओवरलैपिंग सेगमेंट के बीच अंतर कैसे कर सकता हूं?

Question

आसान सवाल, एचटीएमएल में ओवरलैपिंग स्पैन होने के लिए मान्य है?

उदाहरण:

<span id="1">This is <span id="2"> some text </span> some other text </span> 
              ^     ^
              End1      End2 

संपादित करें:

मैं अब देखते हैं कि फैला टैग को बंद करने अस्पष्ट होगा जो एक यह बंद हो रहा है, और कहा कि पहले </span> बंद कर span id = 2, नहीं 1 के बारे में जैसा कि मैंने इरादा किया था।

मेरी समस्या यह है कि मेरे पास टेक्स्ट का एक ब्लॉक है जिसे मैं माउस पर चढ़ने के आधार पर हाइलाइट करने की कोशिश कर रहा हूं। पाठ का यह ब्लॉक खंडों से बना है, जिनमें से कुछ एक दूसरे को "ओवरलैप" करते हैं। मैं इस दस्तावेज़ को प्रस्तुत करने के लिए कुछ jQuery और HTML का उपयोग करने की कोशिश कर रहा हूं, इसलिए जब मैं अनुभागों पर होवर करता हूं, तो उचित एक को हाइलाइट किया जाएगा।

तो, ऊपर दिए गए मेरे उदाहरण में, पहला अवधि पहले स्पैन क्लोज टैग के साथ समाप्त होने वाला है, और दूसरा अवधि दूसरे स्पैन क्लोज टैग के साथ समाप्त होने वाला है। यह मेरे दस्तावेज़ के अर्थशास्त्र के कारण है, ये दो ओवरलैपिंग सेगमेंट हैं।

मुझे यह चाहिए कि जब मैं बाईं ओर होवर करता हूं, तो यह केवल आईडी = 1 और पहले स्पैन को बंद करने के लिए हाइलाइट करेगा, अगर मैं दो "ओवरलैपिंग" स्पैन के बीच होवर करता हूं, तो यह दोनों को हाइलाइट करेगा, और अगर मैं दाईं ओर होवर करता हूं, तो यह स्पैन आईडी = 2 से आखिरी अवधि में बंद हो जाएगा।

हालांकि, मुझे लगता है कि यह संभव नहीं है। क्या कोई तरीका है कि मैं HTML में टेक्स्ट के सेगमेंट को अलग कर सकता हूं जो ओवरलैपिंग की अनुमति देता है? तो मेरी jQuery स्क्रिप्ट जो हाइलाइट करती है जब मैं अलग-अलग स्पैन पर होवर करता हूं, सही भागों को हाइलाइट करेगा।

क्या मुझे div और spans के बीच वैकल्पिक होना चाहिए? क्या मैं उस चीज़ को असंबद्ध कर दूंगा जो मैं बंद कर रहा हूं और मुझे अपने jQuery होवर स्क्रिप्ट के साथ उचित हाइलाइटिंग करने की अनुमति देता है? मैं अब 2 से अधिक सेगमेंट ओवरलैपिंग के बारे में सोच रहा हूं। श्वास, मेरी इच्छा है कि मैं सिर्फ जो कुछ बंद कर रहा हूं उसके बारे में बताऊं।

Answer 1

कोई टैग HTML में ओवरलैप नहीं कर सकता है - उन्हें ठीक से घोंसला होना चाहिए। आपके द्वारा पोस्ट किया गया HTML मान्य है, लेकिन आप जो उम्मीद कर रहे हैं वह अर्थपूर्ण रूप से नहीं हो सकता है। एक </span> उसी दायरे में पिछले <span> को समाप्त करने जा रहा है। आप की पहचान नहीं की जो <span> आप प्रत्येक </span>

<span id="span1">This is <span id="span2"> some text </span> (ends span2) </span> (ends span1) 

इस के साथ बंद हो की उम्मीद कर रहे निश्चित रूप से इस मामले में एक बड़ा अंतर होगा:

<span>This is <span> some text </span> and more text </span> 

Answer 2

हाँ, यह कानूनी है। आप बाहरी और आंतरिक स्पैन के लिए एक अलग शैली निर्दिष्ट करने के लिए ऐसा कर सकते हैं (यदि आप कक्षा या शैली, आदि निर्दिष्ट करना चाहते थे)।

बीटीडब्ल्यू - इसके लिए अधिक आम शब्द "घोंसला" नहीं है "ओवरलैपिंग"।

Answer 3

SPAN तत्व की सामग्री को "इनलाइन" तत्व रखने की अनुमति है। SPAN इन "इनलाइन" तत्वों में से एक है। अधिक जानकारी के लिए DTD declaration for the SPAN element देखें।

Answer 4

सं

जब हम मारा पहला समापन/अवधि यह संदिग्ध है जो दो शुरुआती अवधि में से आप बंद करना चाहते हैं।

अधिकांश लोग, और कंप्यूटर, क्योंकि यह एकमात्र कानूनी विकल्प है, यह निष्कर्ष निकाला जाएगा कि आप बाद के अवधि को बंद करना चाहते हैं। लेकिन आपके प्रश्न के अतिरिक्त संदर्भ पर विचार करते हुए मुझे संदेह है कि आप वास्तव में पूर्व अवधि को बंद करना चाहते हैं; जो 'कानूनी' नहीं है।

"आपको घोंसला हुआ था, ओवरलैपिंग नहीं" के साथ आपको सुधारने वाले लोग समान कटौती कर रहे हैं; आप 'ओवरलैपिंग' का मतलब नहीं ले सकते थे क्योंकि यह अवैध होगा। मुझे लगता है कि आप वास्तव में 'ओवरलैपिंग' का मतलब था, लेकिन यह ठीक है, आपका रहस्य मेरे साथ सुरक्षित है।

Answer 5

यह कानूनी है (foo लाल है, bar नीला है, spam फिर से लाल है यह नेस्ट के रूप में):

<span style="color: red">foo<span style="color: blue">bar</span>spam</span> 

यह नहीं है:

<div style="color: red">foo<span style="color: blue">bar</div>spam</span> 

लेकिन यह ध्यान देने योग्य हो सकता है कि मीडियाविकि और ब्लॉग्स में कुछ अन्य स्वच्छता इंजनों में यह कानूनी है, क्योंकि यह उपरोक्त को परिवर्तित करता है:

<div style="color: red">foo<span style="color: blue">bar</span></div> 
<span style="color: blue">spam</span> 

यह इस बुरे व्यवहार को प्रोत्साहित करती है तर्क दिया जा सकता है, लेकिन हमारे जैसे लोग हैं, जो ढेर अतिप्रवाह का उपयोग के रूप में (इस रूप में समुदाय विकी के रूप में पोस्ट शायद :-P मतदान किया जाएगा), जो एक ब्लॉग लिखते नहीं हर कोई तकनीकी रूप है

Answer 6

मैं आपकी समस्या को समझता हूं, और स्पष्ट रूप से कोई सुरुचिपूर्ण समाधान नहीं है। यदि आप केवल दृश्य परिणाम की परवाह करते हैं, तो एक समाधान टैग को बंद और दोबारा खोलना होगा। बजाय:

<span id="1">This is <span id="2"> some text </span> some other text </span> 

उपयोग कुछ की तरह:

<span class="hl1">This is <span class="hl2"> some text </span></span><span class="hl2"> some other text </span> 

अगर आप को उजागर करने के लिए सिर्फ रंग या पृष्ठभूमि गुण (जैसे RGBA रंग का उपयोग, कई हाइलाइटिंग के लिए अनुमति देने के लिए) का उपयोग, यह क्या करना चाहिए। यदि आप रूपरेखा/सीमा का उपयोग करते हैं तो यह नहीं होगा, क्योंकि आपके पास इंटरमीडिएट सीमाएं भी होंगी जहां टैग बंद हो जाएंगे।

आईएमएचओ, एक टैग या अन्य संरचना (मैं इसे एक एंकर की तरह अधिक देखता हूं), जो ओवरलैपिंग और इंगित करता है कि यह कहां बंद हो जाता है, कार्यान्वयन के लिए कुछ विचार करना होगा।

Answer 7

मुझे पता है, सवाल का जवाब देने में बहुत देर हो चुकी है। लेकिन, यह किसी की मदद कर सकता है।

हाँ! यह पूरी तरह से सही है कि एचटीएमएल में कोई टैग ओवरलैप नहीं हो सकता है। मेरे पास सटीक परिदृश्य था, जैसा उपरोक्त प्रश्न में बताया गया है। लेकिन, सब कुछ एक समाधान है! हम एचटीएमएल टैग संस्करण का उपयोग कर इस समस्या को हल कर सकते हैं!

html स्निपेट, ऊपर समस्या में उल्लेख की तरह तोड़ हो सकता है,

<span id="1_1">This is </span><span id="1_2"><span id="2_1"> some text </span></span><span id="2_2"> some other text </span> 

अब, आप अपने माउस होवर के लिए एक कस्टम संचालकों को जोड़ने के लिए है। हैंडलर कॉलबैक के माध्यम से, आपको स्पैन आईडी को जावास्क्रिप्ट में पास करने की आवश्यकता है। जावास्क्रिप्ट नियंत्रक में, आपको parent id के सभी child ids (उदाहरण के लिए संस्करण 1.x; {'1': ['1_1', '1_2', '1_3']} आदि) के उचित मानचित्र को संरक्षित करने की आवश्यकता है। अब, जब भी आप किसी भी अवधि में माउस को घुमाते हैं, तो आप अपने सभी भाई बहनों को ढूंढ पाएंगे। यहाँ चाल है! इसे पोस्ट करें, आपको बस सभी संस्करणों के लिए कस्टम सीएसएस क्लास जोड़ने की जरूरत है। (उदाहरण के लिए यदि आप आईडी 1_1 पर माउस को घुमाते हैं, तो सभी 1_x संस्करण हाइलाइट किए जाएंगे)।

यह सभी किनारे के मामलों के लिए मेरे लिए सुचारू रूप से काम करता है।