Jquery HTML中嵌套有序列表的编号_Jquery_Html_Css_Html Lists

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

jquery html css

Jquery HTML中嵌套有序列表的编号,jquery,html,css,html-lists,Jquery,Html,Css,Html Lists,我有一个嵌套的有序列表 <ol> <li>first</li> <li>second <ol> <li>second nested first element</li> <li>second nested secondelement</li> <li>second nested thirdelement</li> </o

我有一个嵌套的有序列表

<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开始，例如

首先

第二

第二个嵌套的第一个元素

第二嵌套第二元素

第二嵌套第三元素

第三

第四

我想要的是第二个元素的编号如下：

首先

第二

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

2.2。第二嵌套第二元素

2.3。第二嵌套第三元素

第三

第四

有办法做到这一点吗？

这在纯HTML/CSS中是不可能的。请参阅BalusC的答案，了解一个非常好的开箱即用的解决方案。有关编号类型的列表，请访问

我能找到的最接近的选项是，但是下面的标记

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



使此列表项编号为30。


使此列表项编号为40。


使此列表项编号为41。


使此列表项编号为。。。


使此列表项编号为。。。

生成编号为30、40、41、2和2的列表

正如John已经指出的那样，在这种情况下，最好的选择是编写脚本。

稍加调整，您应该能够适应（在第二个示例中）创建顺序列表。

以下是一个适用于所有浏览器的示例。纯CSS方法在真正的浏览器（即除IE6/7之外的所有浏览器）中都能工作，代码将覆盖不受支持的内容。这是一个很好的例子，你可以复制、粘贴、运行它而不做任何更改

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


所以问题272927
$（文档）.ready（函数（）{
if（$（'ol:first'）.css（'list-style-type'）！='none'）{/*仅适用于IE6/7*/
$（'ol'）。每个（函数（i，ol）{
ol=$（ol）；
var level1=ol.closest（'li'）.index（）+1；
ol.子项（'li'）。每个（功能（i，li）{
li=$（li）；
变量level2=level1+'.++（li.index（）+1）；
li.前置（“”+level2+“”）；
});
});
}
});
html>/**/body ol{/*不会被IE6/7解释*/
列表样式类型：无；
计数器复位：1级；
}
奥利：以前{
内容：柜台（一级）”；
反增量：1级；
}
奥利奥{
列表样式类型：无；
计数器复位：2级；
}
奥利：以前{
内容：柜台（一级）““柜台（二级）”；
反增量：2级；
}
ol li span{/*适用于IE6/7*/
利润率：0.5px 0-25 px；
}
首先
第二
第二个嵌套的第一个元素
第二嵌套第二元素
第二嵌套第三元素

第三
第四

我知道现在回复已经很晚了，但我刚刚发现了一种使用CSS的方法。将此添加到CSS部分（或文件）：

下面是列表代码的示例：

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


第1项
第2项
子项1
子项2

第3项

HTH

如果您在项目中使用sass/scss进行样式设置，您可以使用它。要设置这个嵌套列表的样式，您只需要两行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>

@import“嵌套列表”
+嵌套列表（“嵌套”，2）
首先
第二
第二个嵌套的第一个元素
第二嵌套第二元素
第二嵌套第三代

第三
第四

完整示例您可以从

上克隆/观看或生成css本页上的任何解决方案都不能正确且普遍适用于所有级别和长（包装）段落。由于标记的大小不同（1,1.2,1.10,1.10.5，…），要获得一致的压痕非常困难；它不能只是“伪造的”，即使每个可能的缩进级别都有预先计算的边距/填充

我终于想出了一个解决方案，它实际上是有效的，不需要任何JavaScript

它在Firefox32、Chrome37、IE9和Android浏览器上进行了测试。不适用于IE 7和以前的版本

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, ".") " ";
}

示例：

试一试吧，试试吧。

你需要支持哪些浏览器？需要额外的代码吗？比如Javascript或Ajax？我希望有一个参数器或css元素可以直接传递到列表中。我知道您可以使用参数类型，但这只是尽可能地更改数字类型。这个解决方案是否可以更改，以便使用JQuery应用样式？如果是这样的话，那么它在所有浏览器中都能工作吗？@John:好的，我添加了它。但是，如果禁用JS，它在IE6/7上不起作用：）如果我有两个以上的级别，如何使它起作用？比如说，有5个级别？啊，它也不能很好地处理段落。假设在一个列表元素中有多个段落。不好，只有
有效。添加一个类来识别需要该类的列表会很有帮助

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, ".") " ";
}