javascript - Nested ordered lists -

-

I need a nested list with sub-numbering, such as: 

  1 item 1 1.1 - Subtitle 1 1.2 - Subtitle 2 1.3 - Subtitle 3 1.4 - Subtitle 4 1.5 - Subtitle 5 2. Item 2 2.1 - Subtitle 1 2.2 - Subtitle 2 2.3 - Subtitle 3 2.4 - Subtitle 4 2.5 - Subtitle 5

Well, I know that I can not get it with pure HTML, so it would be great to use something like this and count yourself as a mosaic counting yourself. Ega: 

  & lt; Ol & gt; & Lt; Li & gt; Item 1 & lt; Ol & gt; & Lt; Li & gt; Subtitle 1 & lt; / Li & gt; & Lt; Li & gt; Subtitle 2 & lt; / Li & gt; & Lt; Li & gt; Subtitle 3 & lt; / Li & gt; & Lt; Li & gt; Subtitle 4 & lt; / Li & gt; & Lt; Li & gt; Subtitle 5 & lt; / Li & gt; & Lt; / Ol & gt; & Lt; / Li & gt; & Lt; Li & gt; Item 2 & lt; Ol & gt; & Lt; Li & gt; Subtitle 1 & lt; / Li & gt; & Lt; Li & gt; Subtitle 2 & lt; / Li & gt; & Lt; Li & gt; Subtitle 3 & lt; / Li & gt; & Lt; Li & gt; Subtitle 4 & lt; / Li & gt; & Lt; Li & gt; Subtitle 5 & lt; / Li & gt; & Lt; / Ol & gt; & Lt; / Li & gt; & Lt; / Ol & gt;

Is there a solution to use JavaScript or jQuery or something?

If you want to cross-browser with jQuery: 

 < Code> $ ("ol # list ol"). Each (function (i, el) {$ (this). Children () .each (function (ci, cl) {$ (this) .prepend ('& lt; span class = "pseudonym" & gt; + [I + 1, ci + 1]. Include ('.') + '& Lt; / span & gt;');});}) AddClass ('proxy-processed');

and in your CSS: 

  ol .seudo-num {display: none} ol.pseudo-processed {list-style: none; Padding-left: 0} ol.pseudo-processed .seudo-num {display: inline; Font-weight: bold}

This is for only one level. You can change the code to create recursive functions for many levels.

This is setup to increase your page progressively without JavaScript, it will fallback on normal nested numbering.

UPDATE : @gumbo Thanks for working, I started this code again in a recursive plugin, same as my previous example. Will use CSS, but now it is a "full" jQuery plugin that supports support for any depth: 

  $ .fn.outline = function (option, counter) { Var option = $. Extension ({}, $ .fn.outline.defaults, option), counter = counter || []; it () (function () {$ (this). Child ('li'). (Function (i) {var Ct = counters.concat ([i + 1]); if (counter. Length) {$ ('& lt; span & gt; & lt; / span & gt;') .addClass (options.numberClass) .text Ct.join ('.') + '') .prependTo (this);} $ (this) .Kids ('ol') .line (option, whistle);})}); (counter! Length); This.addClass (options.processedClass)} $ .fn.outline.defaults = {numberClass: 'pseudo-number', processed class: 'pseudo-processed'}

You can call #id : 

  $ ("# list"). Outline ();

Or one Use of the "Perfect Chooser of @Gumbo" to apply it to all ol tags on the page T: 

  $ ( "ol: No (li & gt; Ol) "). Outline ();

And you can either originally override by default or on a personal basis: 

  $ .fn.outline.defaults.processedClass = 'ol-ready'; // or $ ("# list"). Outline ({processedClass: 'ol-ready'});

Comments

Post a Comment

Popular posts from this blog

c# - How to capture HTTP packet with SharpPcap -

-
I would like to capture all incoming HTTP packets on my machine. To do this, I am using SharpPcap which is a WinPcap The cover is. SharpPcap works very well, but it captures TCP packets and what it wants to do for me is a very low level. Does anyone know how can I easily get full HTTP requests / reactions from all these TCP packets? Thanks SharpPcap is already able to capture the packet in the same way That's what the virus does (just in the code instead of the GUI). And you can either either parse them directly or you can put them in the drive in the common .pcap file format. The steps to parse the capture are: Open a connection at any time Loop a while Or start capturing using an event callback Parsing the raw packet for the type you want If you are reading .PPP dump files In addition to calling you an offline capture reader is almost the same, there is no need to select an interface, and you can set the majority There is no need to do the modes. All st
Read more

jquery - SimpleModal Confirm fails to submit form -

-
I am trying to confirm jQuery to show yes / no confirmation when I submit a form. I had modified (in the last list) to capture and block form submissions. However, it only works with jQuery 1.2.6, a recent upgrade stops 1.3.2, if yes is clicked, then by submitting the form. But I can not understand what is wrong / inconsistent in my code now. Demo (which works in both versions of a simple window.href implementation). $ (document) .ready (function () {$ ('input.delete'). Click (function (e) {e.preventDefault (); var target = $ (e .target); Confirm ("Really delete this event?", Function () {target.click ()});});}); How about something like this? The idea of ​​catching clicks (and fire!) On the submitted event is not click event. $ (document) .ready (function () {$ ('# myForm'). Submit (function () {var f = this; Confirm (" Remove? ", Function () {$ (f). Submit ();}) Return; Return the initial session;}}}}; Hope That this is som
Read more

php - Multiple Select with Explode: only returns the word "Array" -

-
By using Wordpress I have created a multiple selection box so that users can select categories to exclude. When the page is initially loaded, I see my predefined default option. However, when I select a new value and I save ... I only see the word "Array" and have not chosen anything else? & lt; Class = "amultiple" id = "& lt; php echo $ value ['id'] ;? gt;" name = "& gt; php echo $ value ['id'] ;; gt; []" Multiple = "multiple" size = "8" & gt; & Lt ;? Php global option; Foreign currency ($ value as value $) {if (get_settings ($ value ['id']) === FALSE {$$ value ['id'] = $ value ['std']; } And {$$ value ['id'] = get_settings ($ value ['id']); }} $ Ranges = & amp; Amp; Categories ('type = post & orderbiz = name & amp; hide_empty = 1'); If ($ ranges) {$ ex_cat = implode (',', $ tt_cat_exclude); Forex Currency ($ range a
Read more