具有父值的有序列表

Question

现在，请大家在开始称其为重复之前，先阅读一下情况。我以直接的方式知道解决方案，但它们是 NOT "dynamic"。让我告诉你我的意思：

使用在 Ordered list CSS style includes parent number 找到的解决方案的变体将效果限制为 OL 并应用 .parented，我得到了这个：

ol.parented {
  counter-reset: parent;
  margin-left: .6875em !important;
}

ol.parented, .parented ol {
  list-style: none !important;
}

ol.parented > li:before {
  counter-increment: parent;
  content: counter(parent) ".";
  padding-right: 9px;
}

ol.parented li ol {
  counter-reset: child;
}

ol.parented ol li:before {
  counter-increment: child;
  content: counter(parent) "." counters(child, '.');
  padding-right: 9px;
}

这允许

<ol class="parented">
  <li>Value 1<ol>
    <li>Value 1.1</li>
    <li>Value 1.2</li>
    <li>Value 1.3</li>
  </ol></li>
  <li>Value 2<ol>
    <li>Value 2.1</li>
    <li>Value 2.2</li>
    <li>Value 2.3</li>
  </ol></li>
  <li>Value 3<ol>
    <li>Value 3.1</li>
    <li>Value 3.2</li>
    <li>Value 3.3</li>
  </ol></li>
 </ol>

看起来像

1. Value 1
  1.1 Value 1.1
  1.2 Value 1.2
  1.3 Value 1.3
2. Value 2
  2.1 Value 2.1
  2.2 Value 2.2
  2.3 Value 2.3
3. Value 3
  3.1 Value 3.1
  3.2 Value 3.2
  3.3 Value 3.3

它不允许跳过值（定义下一个值）。因此，如果我要使用

<ol class="parented">
  <li value="4">Value 4<ol>
    <li>Value 4.1</li>
    <li>Value 4.2</li>
    <li>Value 4.3</li>
  </ol></li>
</ol>

我明白了

1. Value 4
  1.1 Value 4.1
  1.2 Value 4.2
  1.3 Value 4.3

有谁知道如何操作计数器以使用更新后的 LI 值反映在生成的列表中？换句话说，我的最后一个片段应该看起来像

4. Value 4
  4.1 Value 4.1
  4.2 Value 4.2
  4.3 Value 4.3

Answer 1

如果您可以修改 HTML 以包含自定义属性，这将是一个带有伪元素的微不足道的任务：

ol {
    list-style: none;
}

li:before {
    content: attr(data-value);
    display: inline-block;
    margin-right: 5px;
}

<ol class="parented">
  <li data-value="1.">Value 1<ol>
    <li data-value="1.1">Value 1.1</li>
    <li data-value="1.1">Value 1.2</li>
    <li data-value="1.1">Value 1.3</li>
  </ol></li>
  <li data-value="4.">Value 4<ol>
    <li data-value="4.1">Value 4.1</li>
    <li data-value="4.2">Value 4.2</li>
    <li data-value="4.3">Value 4.3</li>
  </ol></li>
 </ol>

Answer 2

我最后写了一些 JavaScript 来为每个 LI 生成一个具有唯一类的样式表来设置值。

var lists = document.getElementsByClassName('parented');
for(var i = 0; i < lists.length; i++) {
  var test = lists[i].getElementsByTagName('li'), parent = [], cparent = 0, j = 0;
  for(var k = 0; k < test.length; k++) {
    if((test[k].getElementsByTagName('ol').length + test[k].getElementsByTagName('ul').length) != 0) {
      parent.push(test[k]);
      k++;
    }
  }
  var style = document.createElement('style');
  style.id = 'parented';
  document.head.appendChild(style);
  style = document.getElementById('parented');
  for(var k = 0; k < parent.length; k++) {console.log(cparent);
    var pnum = (parent[k].hasAttribute('value') ? parent[k].getAttribute('value') : (parseInt((k < cparent) ? cparent : k) + 1));
    cparent = pnum;
    var child = parent[k].getElementsByTagName('li'), rule = 'parent' + (i + 1) + pnum, content = pnum;
    style.innerHTML = style.innerHTML + '.' + rule + '::before { content: "' + content + '."; }';
    parent[k].className = rule;
    for(var l = 0; l < child.length; l++) {
      rule = 'parent' + (i + 1) + pnum + (l + 1);
      content = pnum + '.' + (l + 1);
      style.innerHTML = style.innerHTML + '.' + rule + '::before { content: "' + content + '"; }';
      child[l].className = rule;
    }
  }
}

ol.parented {
  margin-left: .6875em !important;
}
ol.parented, .parented ol {
  list-style: none !important;
}
ol.parented > li:before, ol.parented ol li:before {
  padding-right: 9px;
}

<ol class="parented">
  <li>Value 1<ol>
    <li>Value 1.1</li>
    <li>Value 1.2</li>
    <li>Value 1.3</li>
  </ol></li>
  <li value="4">Value 4<ol>
    <li>Value 4.1</li>
    <li>Value 4.2</li>
    <li>Value 4.3</li>
  </ol></li>
  <li>Value 5<ol>
    <li>Value 5.1</li>
    <li>Value 5.2</li>
    <li>Value 5.3</li>
  </ol></li>
  <li>Value 6<ol>
    <li>Value 6.1</li>
    <li>Value 6.2</li>
    <li>Value 6.3</li>
  </ol></li>
  <li value="10">Value 10<ol>
    <li>Value 10.1</li>
    <li>Value 10.2</li>
    <li>Value 10.3</li>
  </ol></li>
</ol>

这里有一个 JSFiddle，如果喜欢的话：http://jsfiddle.net/pua0b62s/

如果有人知道如何使用 JavaScript 执行此操作，我们将不胜感激，但我认为这是不可能的。我可能是错的，我希望我是，因为那是我需要学习的更多东西。 :)

具有父值的有序列表

Ordered List with Parented Value

html

css

nested-lists

html-lists