listes ordonnées

Question

Nested

je besoin d'une liste imbriquée avec la numérotation des sous-élément, comme ceci:

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

Eh bien, je sais que je ne peux pas y arriver avec HTML pur. Ce serait génial d'utiliser quelque chose comme ça et que la sous-liste automatiquement numérotée:

<ol> 
<li> 
    Item 1 
    <ol> 
    <li>Subitem 1</li> 
    <li>Subitem 2</li> 
    <li>Subitem 3</li> 
    <li>Subitem 4</li> 
    <li>Subitem 5</li> 
    </ol> 
</li> 
<li> 
    Item 2 
    <ol> 
    <li>Subitem 1</li> 
    <li>Subitem 2</li> 
    <li>Subitem 3</li> 
    <li>Subitem 4</li> 
    <li>Subitem 5</li> 
    </ol> 
</li> 
</ol> 

Y at-il une solution pour cela en utilisant JavaScript ou jQuery ou quelque chose?

Answer 1

Si vous voulez le faire cross-browser avec jQuery:

$("ol#list ol").each(function(i, el){ 
    $(this).children().each(function(ci,cel){ 
     $(this).prepend('<span class="pseudo-num">' + [i + 1, ci + 1].join('.') + ' </span>'); 
    }); 
}).addClass('pseudo-processed'); 

et dans votre CSS:

ol .pseudo-num { display: none } 
ol.pseudo-processed { list-style: none; padding-left: 0 } 
ol.pseudo-processed .pseudo-num { display: inline; font-weight: bold } 

Ceci est pour un seul niveau. Vous pouvez modifier le code pour créer une fonction récursive pour plusieurs niveaux.

Cette configuration est d'améliorer progressivement votre page. Sans Javascript, cela reviendrait à une numérotation normale imbriquée.

MISE À JOUR: Merci à @Gumbo travail, que nous avons retravaillé ce code dans un plugin récursif. Il utilise le même CSS comme dans mon exemple précédent, mais maintenant il est « à part entière » plugin jQuery avec support pour toute profondeur:

$.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){ 
      $('<span></span>') 
       .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' 
} 

Vous pouvez ensuite appeler sur un #id spécifique:

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

ou utiliser @ agréable sélecteur de Gumbo pour l'appliquer à tous les ol balises sur une page:

$("ol:not(li > ol)").outline(); 

et vous pouvez soit remplacer les valeurs par défaut à l'échelle mondiale, ou sur un indi base individuelle:

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

Answer 2

Vous pouvez utiliser les CSS pour le faire:

OL { counter-reset: item } 
LI { display: block } 
LI:before { content: counter(item) ". - "; counter-increment: item } 
LI LI:before { content: counters(item, ".") " - "; counter-increment: item } 

Mais il faut un soutien pour counter and counters.

---

Modifier Voici une approche jQuery similaire à celui dcneiner mais sans limitation à la profondeur:

function foo($ol, counters) { 
    counters = counters || []; 
    $ol.each(function(i) { 
     var $this = $(this); 
     $this.children("li").each(function(i) { 
      var $this = $(this); 
      $this.prepend(counters.concat([i+1]).join(".") + " "); 
      $this.children("ol").each(function(j) { 
       foo($(this), counters.concat([i+1])); 
      }); 
     }); 
    }); 
} 
foo($("ol:not(li > ol)")); 

Answer 3

Ni js ni jquery, mais CSS:

<STYLE type="text/css"> 
    UL, OL { counter-reset: item } 
    LI { display: block } 
    LI:before { content: counters(item, "."); counter-increment: item } 
</STYLE> 

Plus ici: http://www.w3.org/TR/WCAG10-CSS-TECHS/#lists