jquery - numeracion - Número de listas ordenadas anidadas en HTML
numeracion en html (6)
Acctualy si usaste sass / scss en tu proyecto para diseñar, puedes usar mixin para esto. Para diseñar esta lista anidada, solo necesita dos líneas de código sass.
@import ''nested_list''
+nested_list(''nested'', 2)
<ol>
<li>first</li>
<li>second
<ol class="nested-2">
<li>second nested first element</li>
<li>second nested secondelement</li>
<li>second nested thirdelement</li>
</ol>
</li>
<li>third</li>
<li>fourth</li>
</ol>
Ejemplo completo que puedes clonar / ver desde mixin o css generado en fidle
Tengo una lista ordenada anidada.
<ol>
<li>first</li>
<li>second
<ol>
<li>second nested first element</li>
<li>second nested secondelement</li>
<li>second nested thirdelement</li>
</ol>
</li>
<li>third</li>
<li>fourth</li>
</ol>
Actualmente, los elementos anidados comienzan de nuevo desde 1, p. Ej.
- primero
- segundo
- segundo primer elemento anidado
- segundo segundo elemento anidado
- segundo tercer elemento anidado
- tercero
- cuarto
Lo que quiero es que el segundo elemento se numere así:
- primero
segundo
2.1. segundo primer elemento anidado
2.2. segundo segundo elemento anidado
2.3. segundo tercer elemento anidado
- tercero
- cuarto
¿Hay alguna forma de hacer esto?
Aquí hay un ejemplo que funciona en todos los navegadores. El enfoque de CSS puro funciona en los navegadores reales (es decir, todo menos en IE6 / 7) y el código jQuery es para cubrir los que no son compatibles. Está en el sabor de un SSCCE , puedes copiarlo sin pegarlo sin cambios.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2729927</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
if ($(''ol:first'').css(''list-style-type'') != ''none'') { /* For IE6/7 only. */
$(''ol ol'').each(function(i, ol) {
ol = $(ol);
var level1 = ol.closest(''li'').index() + 1;
ol.children(''li'').each(function(i, li) {
li = $(li);
var level2 = level1 + ''.'' + (li.index() + 1);
li.prepend(''<span>'' + level2 + ''</span>'');
});
});
}
});
</script>
<style>
html>/**/body ol { /* Won''t be interpreted by IE6/7. */
list-style-type: none;
counter-reset: level1;
}
ol li:before {
content: counter(level1) ". ";
counter-increment: level1;
}
ol li ol {
list-style-type: none;
counter-reset: level2;
}
ol li ol li:before {
content: counter(level1) "." counter(level2) " ";
counter-increment: level2;
}
ol li span { /* For IE6/7. */
margin: 0 5px 0 -25px;
}
</style>
</head>
<body>
<ol>
<li>first</li>
<li>second
<ol>
<li>second nested first element</li>
<li>second nested second element</li>
<li>second nested third element</li>
</ol>
</li>
<li>third</li>
<li>fourth</li>
</ol>
</body>
</html>
Con un pequeño ajuste, debería ser capaz de adaptar la técnica utilizada aquí (en el segundo ejemplo) para crear listas secuenciales.
Ninguna de las soluciones en esta página funciona correcta y universalmente para todos los niveles y párrafos largos (envueltos). Es realmente complicado lograr una indentación consistente debido al tamaño variable del marcador (1., 1.2, 1.10, 1.10.5, ...); no se puede simplemente "falsificar", ni siquiera con un margen / margen precalculado para cada nivel de sangrado posible.
Finalmente descubrí una solución que realmente funciona y no necesita ningún JavaScript.
Se ha probado en Firefox 32, Chromium 37, IE 9 y Android Browser. No funciona en IE 7 y anteriores.
CSS:
ol {
list-style-type: none;
counter-reset: item;
margin: 0;
padding: 0;
}
ol > li {
display: table;
counter-increment: item;
margin-bottom: 0.6em;
}
ol > li:before {
content: counters(item, ".") ". ";
display: table-cell;
padding-right: 0.6em;
}
li ol > li {
margin: 0;
}
li ol > li:before {
content: counters(item, ".") " ";
}
Ejemplo:
Sé que es tarde para responder, pero acabo de encontrar un example de hacerlo usando CSS. Agregue esto a su sección CSS (o archivo):
ol.nested
{
counter-reset: item
}
li.nested
{
display: block
}
li.nested:before
{
content: counters(item, ".") ". ";
counter-increment: item
}
Aquí hay un ejemplo de cómo se vería su código de lista:
<ol class="nested">
<li class="nested">item 1</li>
<li class="nested">item 2
<ol class="nested">
<li class="nested">subitem 1</li>
<li class="nested">subitem 2</li>
</ol></li>
<li class="nested">item 3</li>
</ol>
HTH
Esto no es posible en HTML / CSS puro. Vea la respuesta de BalusC para una gran solución de pensamiento de la caja. Una lista de tipos de numeración se puede encontrar en w3schools, aquí .
La opción más cercana que pude encontrar es el uso del atributo de value , desde w3c , pero el siguiente marcado
<ol>
<li value="30">
makes this list item number 30.
</li>
<li value="40">
makes this list item number 40.
</li>
<li>
makes this list item number 41.
</li>
<li value="2.1">
makes this list item number ...
</li>
<li value="2-1">
makes this list item number ...
</li>
</ol>
produce una lista numerada 30, 40, 41, 2 y 2.
Como John ya señaló, su mejor opción será crear guiones, en esta situación.