दिलचस्प पोस्ट
Javadoc @ लेखक टैग अच्छा अभ्यास "यह" मैप फ़ंक्शन के अंदर अनिर्धारित है Reactjs मैं सी # में पर्यावरण चर कैसे प्राप्त कर सकता हूँ? WPF – कैसे टेम्पलेट के साथ छवि बटन बनाने के लिए दृश्य स्टूडियो में एंबेडेड इंटरप प्रकार सच और झूठी सेटिंग में अंतर क्या है? जावा: स्टेटिक बनाम इनर क्लास mysqli – fetch_array त्रुटि कॉल एक सदस्य फ़ंक्शन fetch_array () पर एक गैर ऑब्जेक्ट mysqli पर जावास्क्रिप्ट में वेब ऑडियो एपीआई के लिए स्थानीय फ़ाइल का उपयोग करना गतिशील डाटाबेस स्कीमा CTRL-r के साथ खोज बिश इतिहास को अग्रेषित करने में असमर्थ आप अपनी प्राथमिक कुंजी कैसे पसंद करते हैं? जेकग्रीड (v4.1.2) के पेड़ग्रिड का वर्गीकरण अजैन्सी मॉडल के साथ काम नहीं कर रहा है लॉक / अनलॉक स्क्रीन प्रोग्राम कैसे करें? कैसे शैली के साथ एक जावास्क्रिप्ट के बिना सीएसएस के साथ <select> ड्रॉपडाउन? आईओएस पर कैमरा रोल से हाल ही की तस्वीर कैसे पुनर्प्राप्त करें?

संख्या ने एचटीएमएल में नेस्टेड आदेश सूची

मेरे पास नेस्टेड आदेश सूची है I

<ol> <li>first</li> <li>second <ol> <li>second nested first element</li> <li>second nested secondelement</li> <li>second nested thirdelement</li> </ol> </li> <li>third</li> <li>fourth</li> </ol> 

वर्तमान में नेस्टेड तत्व 1 से फिर से शुरू करते हैं, उदा

  1. प्रथम
  2. दूसरा
    1. दूसरा नेस्टेड पहला तत्व
    2. दूसरा नेस्टेड दूसरा तत्व
    3. दूसरा नेस्टेड तीसरा तत्व
  3. तीसरा
  4. चौथा

मैं क्या चाहता हूँ दूसरा तत्व इस तरह गिने जा रहा है:

  1. प्रथम
  2. दूसरा

    2.1। दूसरा नेस्टेड पहला तत्व

    2.2। दूसरा नेस्टेड दूसरा तत्व

    2.3। दूसरा नेस्टेड तीसरा तत्व

  3. तीसरा
  4. चौथा

क्या इसे करने का कोई तरीका है?

Solutions Collecting From Web of "संख्या ने एचटीएमएल में नेस्टेड आदेश सूची"

यह एक उदाहरण है जो सभी ब्राउज़रों में काम करता है शुद्ध सीएसएस दृष्टिकोण असली ब्राउज़रों में काम करता है (अर्थात आईआई 6/7 सब कुछ है) और jQuery कोड असमर्थित को कवर करना है। यह एक एसएससीसीई के स्वाद में है, आप इसे बिना किसी बदलाव के कॉपी''अनुरोध कर सकते हैं।

 <!doctype html> <html lang="en"> <head> <title>SO question 2729927</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */ $('ol ol').each(function(i, ol) { ol = $(ol); var level1 = ol.closest('li').index() + 1; ol.children('li').each(function(i, li) { li = $(li); var level2 = level1 + '.' + (li.index() + 1); li.prepend('<span>' + level2 + '</span>'); }); }); } }); </script> <style> html>/**/body ol { /* Won't be interpreted by IE6/7. */ list-style-type: none; counter-reset: level1; } ol li:before { content: counter(level1) ". "; counter-increment: level1; } ol li ol { list-style-type: none; counter-reset: level2; } ol li ol li:before { content: counter(level1) "." counter(level2) " "; counter-increment: level2; } ol li span { /* For IE6/7. */ margin: 0 5px 0 -25px; } </style> </head> <body> <ol> <li>first</li> <li>second <ol> <li>second nested first element</li> <li>second nested second element</li> <li>second nested third element</li> </ol> </li> <li>third</li> <li>fourth</li> </ol> </body> </html> 

मुझे पता है कि उत्तर देने में देर हो गई है, लेकिन मुझे बस सीएसएस का उपयोग करने का एक उदाहरण मिला। इसे आप सीएसएस अनुभाग (या फ़ाइल) में जोड़ें:

 ol.nested { counter-reset: item } li.nested { display: block } li.nested:before { content: counters(item, ".") ". "; counter-increment: item } 

यहां एक उदाहरण है कि आपकी सूची कोड कैसा दिखेगा:

 <ol class="nested"> <li class="nested">item 1</li> <li class="nested">item 2 <ol class="nested"> <li class="nested">subitem 1</li> <li class="nested">subitem 2</li> </ol></li> <li class="nested">item 3</li> </ol> 

HTH

इस पृष्ठ पर कोई भी समाधान सभी स्तरों और लंबे (लपेटा हुआ) पैराग्राफ के लिए सही और वैश्विक रूप से काम करता है। मार्कर के चर आकार (1., 1.2, 1.10, 1.10.5, …) के कारण लगातार इंडेंटेन्ट हासिल करने के लिए वाकई मुश्किल है; यह सिर्फ "बेक किया हुआ" नहीं हो सकता है, यहां तक ​​कि प्रत्येक संभव इंडेंटेशन स्तर के लिए प्रीकम्पुटेड मार्जिन / पैडिंग के साथ भी नहीं।

मैं अंत में एक समाधान का पता लगाया जो वास्तव में काम करता है और किसी भी जावास्क्रिप्ट की आवश्यकता नहीं है।

यह फ़ायरफ़ॉक्स 32, क्रोमियम 37, आईई 9 और एंड्रॉइड ब्राउज़र पर परीक्षण किया गया है। IE 7 और पिछले पर काम नहीं करता है

सीएसएस:

 ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; } ol > li { display: table; counter-increment: item; margin-bottom: 0.6em; } ol > li:before { content: counters(item, ".") ". "; display: table-cell; padding-right: 0.6em; } li ol > li { margin: 0; } li ol > li:before { content: counters(item, ".") " "; } 

उदाहरण: उदाहरण

इसे jsFiddle पर कोशिश करो, यह Gist पर कांटा।

अगर आप स्टाइल के लिए प्रोजेक्ट में sass / scss इस्तेमाल करते हैं तो आप इस के लिए मिक्सिन का इस्तेमाल कर सकते हैं। इस नेस्टेड सूची को स्टाइल करने के लिए आपको केवल दो पंक्तियां सॉस कोड की आवश्यकता होती है

 @import 'nested_list' +nested_list('nested', 2) <ol> <li>first</li> <li>second <ol class="nested-2"> <li>second nested first element</li> <li>second nested secondelement</li> <li>second nested thirdelement</li> </ol> </li> <li>third</li> <li>fourth</li> </ol> 

पूर्ण उदाहरण आप जीआईटी रेपो से तैयार / देख सकते हैं या सीधा सीएसएस पर जा सकते हैं

थोड़ा सा tweaking के साथ, आप अनुक्रमिक सूची बनाने के लिए यहां इस्तेमाल की गई तकनीक (दूसरे उदाहरण में) को अनुकूलित करने में सक्षम होना चाहिए।

यह शुद्ध HTML / CSS में संभव नहीं है बॉलुस के एक महान विचार-के-द-बॉक्स समाधान के लिए जवाब देखें। नंबरों की एक सूची w3schools पर यहां पाई जा सकती है

सबसे निकटतम विकल्प मैं ढूंढने में सक्षम था w3c से, value विशेषता का उपयोग , लेकिन निम्न मार्कअप

 <ol> <li value="30"> makes this list item number 30. </li> <li value="40"> makes this list item number 40. </li> <li> makes this list item number 41. </li> <li value="2.1"> makes this list item number ... </li> <li value="2-1"> makes this list item number ... </li> </ol> 

30, 40, 41, 2 और 2 की संख्या सूचीबद्ध करता है।

जैसा कि जॉन ने पहले ही बताया है, आपकी स्थिति में, आपकी सबसे अच्छी शर्त पटकथा होने जा रही है