jQuery HTML 中嵌套的有序列表的编号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2729927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Number nested ordered lists in HTML
提问by John
I have a nested ordered list.
我有一个嵌套的有序列表。
<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>
Currently the nested elements start back from 1 again, e.g.
当前嵌套元素再次从 1 开始，例如
- first
- second
- second nested first element
- second nested second element
- second nested third element
- third
- fourth
- 第一的
- 第二
- 第二个嵌套的第一个元素
- 第二个嵌套的第二个元素
- 第二个嵌套的第三个元素
- 第三
- 第四
What I want is for the second element to be numbered like this:
我想要的是第二个元素的编号如下：
- first
second
2.1. second nested first element
2.2. second nested second element
2.3. second nested third element
- third
- fourth
- 第一的
第二
2.1. 第二个嵌套的第一个元素
2.2. 第二个嵌套的第二个元素
2.3. 第二个嵌套的第三个元素
- 第三
- 第四
Is there a way of doing this?
有没有办法做到这一点？
采纳答案by BalusC
Here's an example which works in all browsers. The pure CSS approach works in the real browsers (i.e. everything but IE6/7) and the jQuerycode is to cover the unsupported. It's in flavor of an SSCCE, you can just copy'n'paste'n'run it without changes.
这是一个适用于所有浏览器的示例。纯 CSS 方法适用于真实浏览器（即除 IE6/7 之外的所有浏览器），而jQuery代码将覆盖不支持的内容。它具有SSCCE的味道，您可以直接复制'n'paste'n'run 它而无需更改。
<!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>
回答by Alexandre
I know it is late to reply, but I just found an exampleof doing that using CSS. Add this to you CSS section (or file):
我知道回复晚了，但我刚刚找到了一个使用 CSS 做到这一点的例子。将此添加到您的 CSS 部分（或文件）：
ol.nested
{
counter-reset: item
}
li.nested
{
display: block
}
li.nested:before
{
content: counters(item, ".") ". ";
counter-increment: item
}
Here is an example of how your list code would look like:
以下是您的列表代码的示例：
<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
HTH
回答by Jakub Jirutka
None of solutions on this page works correctly and universally for all levels and long (wrapped) paragraphs. It's really tricky to achieve a consistent indentation due to variable size of marker (1., 1.2, 1.10, 1.10.5, …); it can't be just “faked,” not even with a precomputed margin/padding for each possible indentation level.
此页面上的所有解决方案均不适用于所有级别和长（换行）段落。由于标记的可变大小 (1., 1.2, 1.10, 1.10.5, ...)，实现一致的缩进真的很棘手；它不能只是“伪造”，甚至不能为每个可能的缩进级别预先计算边距/填充。
I finally figured out a solution that actually worksand doesn't need any JavaScript.
我终于找到了一个真正有效并且不需要任何 JavaScript的解决方案。
It's tested on Firefox 32, Chromium 37, IE 9 and Android Browser. Doesn't work on IE 7 and previous.
它在 Firefox 32、Chromium 37、IE 9 和 Android 浏览器上进行了测试。不适用于 IE 7 及更早版本。
CSS:
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, ".") " ";
}
Example:
例子：
回答by alexche8
Acctualy if you used sass/scss in you project for styling you can use mixinfor this . For styling this nested list you need only two lines of sass code.
实际上，如果您在项目中使用 sass/scss 进行样式设置，则可以为此使用mixin。要设置这个嵌套列表的样式，您只需要两行 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>
Full example you can clone/watch from git repoor generated css on fidle
回答by Pops
This is not possible in pure HTML/CSS.See BalusC's answer for a great thinking-out-of-the-box solution. A list of numbering types can be found at w3schools, here.
这在纯 HTML/CSS 中是不可能的。请参阅 BalusC 的答案，以了解开箱即用的出色解决方案。编号类型列表可以在w3schools找到，这里。
The closest option I was able to find is use of the valueattribute, from w3c, but the following markup
我能找到的最接近的选项是使用value来自 w3c的属性，但以下标记
<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>
produces a list numbered 30, 40, 41, 2 and 2.
生成编号为 30、40、41、2 和 2 的列表。
As John already pointed out, your best bet is going to be scripting, in this situation.
正如约翰已经指出的那样，在这种情况下，您最好的选择是编写脚本。
回答by Robert Harvey
With a little tweaking, you should be able to adapt the technique used here(in the second example) for creating sequential lists.
