在HTML中编号嵌套排序的列表 [英] Number nested ordered lists in HTML

查看:140
本文介绍了在HTML中编号嵌套排序的列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个嵌套的有序列表。

 < ol> 
< li>第一< / li>
< li> second
< ol>
< li>第二个嵌套的第一个元素< / li>
< li>第二个嵌套secondelement< / li>
< li>第二个嵌套thirdelement< / li>
< / ol>
< / li>
< li>第三< / li>
< li>第四< / li>
< / ol>

当前嵌套的元素从1开始重新开始,例如


  1. 第一

  2. 第二个


    1. 第二个嵌套第一个元素

    2. 第二个嵌套的第二个元素
    3. 第二个嵌套的第二个元素
      第三个
    4. 第四个

    我想要的是第二个元素的编号方式如下:


    1. 首先



    2. 2.1。第二个嵌套的第一个元素



      2.2。第二个嵌套的第二个元素



      2.3。第二个嵌套的第三个元素


    3. 第三个

    4. 第四个

    有这样做吗?

    解决方案

    这里有一个例子适用于所有浏览器。纯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.

    1. first
    2. second

      1. second nested first element
      2. second nested second element
      3. second nested third element

    3. third
    4. fourth

    What I want is for the second element to be numbered like this:

    1. first
    2. second

      2.1. second nested first element

      2.2. second nested second element

      2.3. second nested third element

    3. third
    4. 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆