Question

我有几个div s兄弟姐妹，我想把它们变成一个如下所示的轮廓：

一
两个
三
1. 一
  1. 一
  2. 两个
2. 两个
四
五

我不太确定如何做到这一点。我对以下Codepen运气不错。我目前正在使用1到10的CSS类来表示我们需要缩进到列表中的深度。

我想用Javascript完成此任务。

Answer 1

使用堆栈...（抱歉使用咖啡，但逻辑很重要）

    entryLevel = [
      "one",
      "two",
      "three",
      "four",
      "five",
      "six",
      "seven",
      "eight",
      "nine",
      "ten"
    ]

    #make a class list a bit tricky 
    all_items="."+entryLevel.join(", .") 


    #this is to find the index / level of each element (could have more than on class)
    get_index = ($$) =>
      for cla, i in entryLevel
        return i+1 if $$.hasClass(cla)

这里我们去基础元素是body（或者你想要的）我们需要记住一些事情

    stack=[$('body')]
    old_index=1
    list_index=1

我们迭代所有类并获得索引

    $(all_items).each (i,item) =>
        $$=$(item)
        i=get_index($$)

如果我们退回水平，我们必须删除最顶层的容器 - 但是我们如何记住旧索引（这里我错过了＆＃34;（）＆＃34; pop之后

        stack.pop() if i<old_index
        old_index=i

让我们来看看我们是否有这个容器的列表，如果没有将新列表附加到父容器......

        unless stack[i]
            id="list_#{list_index}"
            list_index+=1
            stack[i-1].append("<ol id='#{id}'></ol>")
            stack[i]=$("#"+id)

最后将项目移到最上面的列表中

        stack[i].append($$)

或列表：

        $$.wrap("<li></li>")
        stack[i].append($$.parent())

pen

Answer 2

实现这一目标的简单方法是使用margin属性。以下是使用具有不同li设置的margin-left元素的工作示例。当然，您可以将边距值更改为您想要的任何值。

＆＃13;

.lv1,
.lv2,
.lv3 {
  list-style-type: decimal;
}

.lv2 {
  margin-left: 8px;
}

.lv3 {
  margin-left: 16px;
}

＆＃13;

<ol>
  <li class="lv1">One</li>
  <li class="lv1">Two</li>
  <li class="lv1">Three
    <ol>
      <li class="lv2">One
        <ol>
          <li class="lv3">One</li>
          <li class="lv3">Two</li>
        </ol>
      </li>
      <li class="lv2">Two</li>
    </ol>
  </li>
  <li class="lv1">Four</li>
  <li class="lv1">Five</li>
</ol>

＆＃13;

编辑：已更新以重置缩进项目的编号。

基于Div类创建有序列表

2 个答案: