在HTML中编号嵌套排序的列表 [英] Number nested ordered lists in HTML
问题描述
我有一个嵌套的有序列表。
< ol>
< li>第一< / li>
< li> second
< ol>
< li>第二个嵌套的第一个元素< / li>
< li>第二个嵌套secondelement< / li>
< li>第二个嵌套thirdelement< / li>
< / ol>
< / li>
< li>第三< / li>
< li>第四< / li>
< / ol>
当前嵌套的元素从1开始重新开始，例如
- 第一
- 第二个
- 第二个嵌套第一个元素
- 第二个嵌套的第二个元素 第二个嵌套的第二个元素
- 第四个
第三个
我想要的是第二个元素的编号方式如下：
- 首先
-
秒
2.1。第二个嵌套的第一个元素
2.2。第二个嵌套的第二个元素
2.3。第二个嵌套的第三个元素
- 第三个
- 第四个
有这样做吗？
这里有一个例子适用于所有浏览器。纯CSS方法适用于实际的浏览器（即IE6 / 7以外的所有浏览器），而 jQuery 代码则覆盖不受支持的。它的风格是 SSCCE ，您可以直接复制并粘贴它，而无需更改。
<！doctype html>
< html lang =en>
< head>
< title> SO问题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 * /
$（'ol ol'）。每个（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 {/ *不会被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）。计数器（level2）;
counter-increment：level2;
}
ol li span {/ *对于IE6 / 7。 * /
margin：0 5px 0 -25px;
}
< / style> ;,
< / head>
< body>
< ol>
< li>第一< / li>
< li> second
< ol>
< li>第二个嵌套的第一个元素< / li>
< li>第二个嵌套的第二个元素< / li>
< li>第二个嵌套的第三个元素< / li>
< / ol>
< / li>
< li>第三< / li>
< li>第四< / li>
< / ol>
< / body>
< / html>
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.
- 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
Is there a way of doing this?
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 jQuery code is to cover the unsupported. It's in flavor of an SSCCE, you can just copy'n'paste'n'run it without changes.
<!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>
这篇关于在HTML中编号嵌套排序的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
