在HTML中编号嵌套排序的列表 | 在HTML中编号嵌套排序的列表

本文介绍了在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以外的所有浏览器），而代码则覆盖不受支持的。它的风格是，您可以直接复制并粘贴它，而无需更改。
 <！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中编号嵌套排序的列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！