Verschachtelte Nummerierung von Überschriften und Listen

Question

Ich google und stapleoverflow'ing für eine ziemlich lange Zeit und ich stecke fest.
Die Aufgabe ist die folgende: make nested Numerierung (1., 1.1., 1.1.1 etc.) sowohl für Überschriften (<h2> durch <h4>) und Listen (<ol> und <ul>). Die komplizieren Punkte sind:

1. es könnte Schriften und Listen in beliebiger Menge sein (beispielsweise ein h2 drei verschachtelten ol s haben kann, die zweite h2 zwei h3 s haben kann, dann wird der erste h3 zwei h4 s , der zweite von denen hat ul mit einem verschachtelten ol, und so weiter). Und die Nummerierung sollte einmalig sein und über das gesamte Dokument beobachtet werden.
2. das Dokument wird eine Vorlage für Leute nicht soo agil mit HTML sein, also je weniger Klassen, Daten-Attribute und so weiter, desto besser.

Was habe ich schon gemacht:

$(function() { 
    indices = new Array(); 
    // Not every element should be numbered, so I've added a class to those who should 
    $(".item").each(function() { 
     // I'm assigning the level manually, like this: 
     // <h4 class="item" data-level="3">blah blah</h4> 
     // any better solution is welcome 
     var hIndex = parseInt($(this).data("level")); 
     if (indices.length - 1 > hIndex) { 
      indices= indices.slice(0, hIndex + 1); 
     } 
     if (indices[hIndex] == undefined) { 
      indices[hIndex] = 0; 
     } 
     indices[hIndex]++; 
     // Now I try to number lists and nested lists, and here I'm stuck 
     if ($(this).is("ol, ul")) { 
      var $that = $(this); 
      $(this).find("li").each(function() { 
       // Trying to add those attributes to <li>s... no dice :(
       $(this).addClass("item"); 
       $(this).data("level", $that.data("level")+1); 
      }); 
     } 
     var number = $.grep(indices, Boolean).join("."); 
     $(this).prepend(number+". "); 
    }); 
}); 

jeder Vorschlag wird sehr geschätzt.

Answer 1

Hier ist, wie ich es endlich geschafft habe, wenn jemand es auch wie ich braucht.
Zunächst einmal müssen Sie die Einzelteile (Überschriften und Listen) markieren, wie folgt:

<h2 class="item" data-level="1">Largest item</h2> 
<h3 class="item" data-level="2">A smaller item</h3> 
<ol class="item" data-level="3"> 
<li>Smallest item 1</li> 
<li>Smallest item 2</li> 
<li>Smallest item 3</li> 
</ol> 

Hinweis: Sie haben data-level manuell einstellen, kann ich nicht mit diesem bisher nichts tun konnte.
Und hier ist der Code, setzen Sie es in Ihrem $(function() {}:

$("ol.item").each(function() { 
    // There might be lots of <li>s, we don't want to set the attributes manually for each one 
    $(this).find("li").each(function() { 
     $(this).addClass("item").data("level", $(this).parent().data("level")); 
    }); 
    $(this).removeClass("item"); // The <ol> does not need this anymore 
}); 

indices = new Array(); 
$(".item").not("ol").each(function() { // Just in case, we don't need <ol>s 
    var hIndex = parseInt($(this).data("level")); 
    // Going to the next level 
    if (indices.length - 1 > hIndex) { 
     indices= indices.slice(0, hIndex + 1); 
    } 
    // Going to the previous level 
    if (indices[hIndex] == undefined) { 
     indices[hIndex] = 0; 
    } 
    indices[hIndex]++; 
    // Cutting off nulls and prepending the number to the item 
    $(this).prepend($.grep(indices, Boolean).join(".") + ". "); 
});