当前位置: 首页 > 面试题库 >

在HTML中编号嵌套的有序列表

陆运乾
2023-03-14
问题内容

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

<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>

当前,嵌套元素再次从1开始,例如

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

我想要的是第二个元素的编号,如下所示:

  1. 第一
  2. 第二

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

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

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

  1. 第三
  2. 第四

有办法吗?


问题答案:

这是一个适用于所有浏览器的示例。纯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>


 类似资料:
  • 考虑: 如果我们序列化Foo(),输出是: 我想要: 最干净的方法是什么?

  • 问题内容: 我有一个对象A的列表。此列表中的每个对象A都包含对象B的列表,而对象B包含对象C的列表。对象C包含一个属性名称,我想使用它使用Java 8进行过滤。 如何使用流在Java 8中编写以下代码以避免嵌套循环: 问题答案: 您可以使用两个,然后使用a,然后可以选择第一个,或者如果没有结果返回:

  • 我有一个对象列表A。此列表中的每个对象A都包含对象B的列表,对象B包含对象C的列表。对象C包含一个属性名称,我想使用java 8进行过滤。 如何使用流在java8中编写下面的代码以避免嵌套循环:

  • 问题内容: 我有类似的东西 并且需要具有: 非常感谢! 编辑:我想按subkey1进行排序,这之前还不清楚。 问题答案: 使用关键字表示功能和方法: 演示: 假定 所有 顶级词典都具有一个键,该键被假定为带有键的字典。 有关更多详细信息和技巧,请参见Python Sorting HOWTO 。

  • 问题内容: 试图了解如何在Firebase中实现嵌套列表。 可以解决的问题:1-to-N消息传递系统,对于每个消息,您希望维护一个已接收和阅读该消息的用户列表。 阅读了“ Firebase中阵列的最佳实践”。尝试避免使用数组,因为我要同时进行写操作,而在这里看来它们并不是一个好选择。 当前试图通过在每个消息下存储子树来实现此目的,每个子树是已接收,读取或以其他方式对消息 Y 执行某些操作 X 的用

  • 我是Java8新手,需要重写一段旧代码来实现一个新的alghoritm。任务是过滤每个列表具有最大速度的对象。列表嵌套在地图中:道路的根地图,其中包含道路段的地图,每个道路段的地图包含对象列表,每个对象以时间间隔降低测量的速度。我需要找到每个列表的所有最大速度。 我发现以下链接看起来像我的问题,但我不能适应他们,我不确定我的尝试解决我的问题正确。 如何使用Java8流和过滤器过滤嵌套循环? Jav