İç içe geçmiş başlıkların ve listelerin numaralandırılması

Question

Uzun bir süredir googling ve stackoverflow'ing yapıyorum ve sıkışıp kaldım. yapmak iç içe numaralandırma (1., 1.1., 1.1.1 vs.) hem başlıkları (<h4> aracılığıyla <h2>) ve listeleri (<ol> ve <ul>) için:
görev şudur. komplike noktalar şunlardır:

1. herhangi bir miktarda başlıkları ve listeler (örneğin bir h2 daha sonra birinci h3 iki h4 s sahiptir, ikinci h2 iki h3 s olabilir, iç içe üç ol s olabilir olabilir Bunların ikincisi, iç içe geçmiş ol ve benzeri ile ul'a sahiptir, vb. Ve numaralandırma benzersiz olmalıdır ve tüm belgede gözükmelidir.
2. belgesinde, HTML ile çevik olmayan kişiler için bir şablon olacak, böylece daha az sınıf, veri özniteliği vb.

Zaten yaptığım Ne:

$(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+". "); 
    }); 
}); 

herhangi bir öneri çok takdir edilmektedir.

Answer 1

Sonunda, benim gibi birisine ihtiyaç duyarsa, bunu nasıl gerçekleştiririm. Ben şimdiye kadar bu bir şey yapamadı el data-level ayarlamak zorunda:

<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> 

Not: Her şeyden
Öncelikle, öğeleri aşağıdaki gibi (başlıkları ve listeleri) işaretlemesi gerekir.
Ve burada içine koymak, kod aşağıdadır $(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(".") + ". "); 
});