jquery - 如何复制div :after to other div的值

Question

我有一个简单的 li 元素列表，我想使用 CSS counter() 函数。

body       {counter-reset: quantity}
ul li      {counter-increment: quantity}
.sum:after {content: counter(quantity)}

<div class="mirror"></div>
<ul>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
</ul>
<div class="sum"></div>

问题是计数器应该在页面的末尾(在 .sum 内 - 毕竟 li 需要计数)但我需要在页面顶部显示其值(在 .mirror 或 .mirror:after 内)。

我试图找到一些 jQuery 解决方案，但没有任何效果。我认为问题在于从 :after 伪元素 中获取值。

Answer 1

您可以利用 Flexbox 和 order 属性及其用法来显示计数器 在 list items 之上，因为 .mirror div 需要放在 DOM 中的 ul 元素之后:

body {counter-reset: quantity}
ul li {counter-increment: quantity}

.flex-container {
  display: flex; /* assigned flex behavior to the parent wrapper so that you can take advantage of the order property / displays flex-items (children) inline by default, that's why you need to change its direction */
  flex-direction: column; /* now it stacks them vertically */
}

.flex-container > ul {
  order: 1; /* displays list items below the counter even though they are above it in the DOM / 1 because the .mirror div has the default value of 0 */
}

.mirror:after {
  content: counter(quantity);
}

<div class="flex-container">
  <ul>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
  </ul>
  <div class="mirror"></div>
</div>