Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>If you want to do it cross-browser with jQuery:</p> <pre><code>$("ol#list ol").each(function(i, el){ $(this).children().each(function(ci,cel){ $(this).prepend('&lt;span class="pseudo-num"&gt;' + [i + 1, ci + 1].join('.') + ' &lt;/span&gt;'); }); }).addClass('pseudo-processed'); </code></pre> <p>And in your CSS:</p> <pre><code>ol .pseudo-num { display: none } ol.pseudo-processed { list-style: none; padding-left: 0 } ol.pseudo-processed .pseudo-num { display: inline; font-weight: bold } </code></pre> <p>This is for one level only. You could alter the code to create a recursive function for multiple levels.</p> <p>This is setup to progressively enhance your page. Without Javascript it would fallback to normal nested numbering.</p> <p><strong>UPDATE</strong>: Thanks to <em>@Gumbo</em> work, I reworked this code into a recursive plugin. It would use the same CSS as in my previous example, but now it is a "full fledged" jQuery plugin with support for any depth:</p> <pre><code>$.fn.outline = function(options, counters){ var options = $.extend({}, $.fn.outline.defaults, options), counters = counters || []; this.each(function(){ $(this).children('li').each(function(i){ var ct = counters.concat([i + 1]); if(counters.length){ $('&lt;span&gt;&lt;/span&gt;') .addClass(options.numberClass) .text(ct.join('.') + ' ') .prependTo(this); } $(this).children('ol').outline(options, ct); }) }); if(!counters.length) this.addClass(options.processedClass) } $.fn.outline.defaults = { numberClass: 'pseudo-num', processedClass: 'pseudo-processed' } </code></pre> <p>You could then call it on a specific <code>#id</code>:</p> <pre><code> $("#list").outline(); </code></pre> <p>Or use @Gumbo's nice selector to apply it to all <code>ol</code> tags on one page:</p> <pre><code> $("ol:not(li &gt; ol)").outline(); </code></pre> <p>And you can either override the defaults globally, or on an individual basis:</p> <pre><code> $.fn.outline.defaults.processedClass = 'ol-ready'; // or $("#list").outline({processedClass: 'ol-ready'}); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload