All geek questions in one place

How to make <ol> with decimal places?

Want to create a list like this:

1. Section Header
    1.1 Some Text Here That is Quite Long
    1.2 Some Text Here That is Quite Long
    1.3 Some Text Here That is Quite Long
2. Section Header
    2.1 Some Text Here That is Quite Long
    2.2 Some Text Here That is Quite Long
    2.3 Some Text Here That is Quite Long

but ideally as the right one or a combination (I like to have the right pages). Is it possible?

+3
source share
3 answers

Here's a JavaScript solution for browsers that don't fully support CSS2. I tested it in Firefox 3.5, IE6, IE7, IE8, and Chrome 4.0. I wrote a clean version of JavaScript and an equivalent version of jQuery (1.4!), Which, as you can imagine, is much shorter.

JavaScript , , CSS. , JavaScript (.. <ol> <li>, , HTML <ol> s. (. )).

, JavaScript , ( CSS ).

jQuery

http://jsbin.com/unujo ( http://jsbin.com/unujo/edit)

JavaScript

http://jsbin.com/ekono ( http://jsbin.com/ekono/edit)

:

jQuery

(function ($) {
  $.fn.addNumbering = function (separator, parentNumbering) {
    var root = !parentNumbering;
    parentNumbering = parentNumbering || '';
    separator = separator || '.';

    $.each(this, function () {
      var items = root ? $(this).children() : this;

      items.each(function (ii, item) {
        var numberingText = parentNumbering + (ii + 1) + separator;

        // We don't add numbering to root list items since
        // the CSS already does that correctly.
        if (!root) {
          $('<span></span>', {
            text: numberingText,
            className: 'numbering'
          }).prependTo(this);
        }

        $.fn.addNumbering.call([$(this).find('>ol>li')], separator, numberingText);
      });
    });
  }
})(jQuery);

$('.numbered').addNumbering();

JavaScript:

function addNumbering(list, separator, parentNumbering) {
  var root = !parentNumbering;
  parentNumbering = parentNumbering || '';
  separator = separator || '.';

  // If 'list' is an Array, assume we were given a
  // collection of ordered lists and call addNumbering on each
  if (Object.prototype.toString.call(list) === "[object Array]") {
    each(
      list, 
      function (list, ii) {
        addNumbering(list, separator, parentNumbering);
      }
    );
    return;
  }

  var
    listItem = function (childNode) {
      // Ignore text nodes. We assume that
      // the HTML follows standards so all the
      // remaining nodes should be list items.
      return childNode.nodeType === 1;
    },
    items = select(list.childNodes, listItem);

  each(
    items,
    function (item, ii) {
      var numberingText = parentNumbering + (ii + 1) + separator;

      // We don't add numbering to root list items since
      // the CSS already does that correctly.
      if (!root) {
        var numbering = document.createElement('span');
        numbering.innerHTML = numberingText;
        numbering.className = 'numbering';

        item.insertBefore(numbering, item.childNodes[0]);
      }

      var
        subLists = select(
          item.childNodes,
          function (childNode) {
            return childNode['tagName'] && childNode.tagName.toLowerCase() === 'ol';
          }
        ),
        subListItemWrapper = {childNodes: []};
      each(
        subLists,
        function (subList) {
          subListItemWrapper.childNodes =
            subListItemWrapper.childNodes.concat(select(
              subList.childNodes,
              listItem
            ));
        }
      );

      addNumbering(subListItemWrapper, separator, numberingText);
    }
  );
}

function select (things, selectFunction) {
  if (Array.filter) {
    return Array.prototype.slice.call(things, 0).filter(selectFunction);
  }
  var selected = selected || [];

  each (
    things,
    function (thing) {
      selectFunction(thing) && selected.push(thing);
    }
  );

  return selected;
}

function each (things, eachFunction) {
  if (Array.forEach) {
    things.forEach(eachFunction);
    return;
  }
  var numThings = things.length, ii;

  for (ii = 0; ii < numThings; ii++) {
    eachFunction(things[ii], ii, things);
  }
}

addNumbering(select(
  document.body.childNodes,
  function (childNode) {
    return childNode.nodeType === 1 && childNode.className.indexOf('numbered') !== -1;
  }
));

HTML CSS

<!doctype html> 
<html lang="en"> 
<head> 
  <title></title> 
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
  <style type="text/css" media="screen"> 
    body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }

    .numbering { padding: 0 0.8em 0 1.2em; }
    .numbered ol { list-style-type: none; }
    .numbered > li > ol { padding-left: 0; }
  </style> 
</head> 
<body> 
  <ol> 
    <li>This</li> 
    <li>is a
      <ol> 
        <li>vanilla</li> 
        <li>list</li> 
      </ol> 
    </li> 
  </ol> 

  <ol class="numbered"> 
    <li>This is a numbered list</li> 
    <li>Vestibulum auctor dapibus neque.
      <ol> 
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
        <li>Aliquam tincidunt mauris eu risus.</li> 
      </ol> 
      It even handles interspersed content! Note that he numbering continues where it left off:
      <ol> 
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
        <li>Aliquam tincidunt mauris eu risus.</li> 
      </ol> 
    </li> 
  </ol> 

  <ol class="numbered"> 
    <li>This is another numbered list</li> 
    <li>Aliquam tincidunt mauris eu risus.</li> 
    <li>Vestibulum auctor dapibus neque.
      <ol> 
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
        <li>Aliquam tincidunt mauris eu risus.</li> 
        <li>Vestibulum auctor dapibus neque.
          <ol> 
            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> 
            <li>Aliquam tincidunt mauris eu risus.</li> 
          </ol> 
        </li> 
        <li>Aliquam tincidunt mauris eu risus.</li> 
        <li>Vestibulum auctor dapibus neque.</li> 
      </ol> 
    </li> 
    <li>Aliquam tincidunt mauris eu risus.</li> 
    <li>Vestibulum auctor dapibus neque.</li> 
    <li>Aliquam tincidunt mauris eu risus.</li> 
    <li>Vestibulum auctor dapibus neque.</li> 
  </ol> 
</body> 
</html>
+3
<ol type="1">
    <li>abc</li>
</ol>
+2

Source: https://habr.com/ru/post/1728602/

More articles:


All Articles