如何将 div:after 的值复制到其他 div

Question

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

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

问题是 DOM 是从上到下读取的，:after 是动态创建的伪元素。这些元素根本 不存在 直到它们被实际写入 DOM，所以对 .mirror:after 的简单更改不会像您期望的那样工作:

body {
  counter-reset: quantity;
}

ul li {
  counter-increment: quantity;
}

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

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

但是，这可以通过使用 JavaScript 来解决，并等待页面完成加载后再输出计数器。你可以用 document.querySelectorAll 来计算元素。为此，我使用了一个简单的 li selector，但如果需要，它可以很容易地更具体。

要将它们插入回 mirror class，您可以 select 使用 document.getElementsByClassName, and access it with [0]. The [0] is needed because document.getElementsByClassName returns a NodeList collection of elements, and you want the first result. Then you simply set the content with .innerHTML，如图所示在以下内容中：

var items = document.querySelectorAll('li');
var itemCount = items.length;

var mirror = document.getElementsByClassName('mirror')[0];
mirror.innerHTML = itemCount;

<div class="mirror"></div>

<ul>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
  <li>..</li>
</ul>

<div class="sum"></div>

希望对您有所帮助！ :)

Answer 2

不幸的是，您 can't access this value through scripts 也没有将其设置为 DOM 树中可访问的变量...

然而，你可以做的是渲染你的 .mirror，就好像它在 DOM 树的上层，这要归功于 flex-direction: column 和 order CSS3属性。

.container {
  counter-reset: quantity;
  display: flex;
  flex-direction: column;
}
ul li {
  counter-increment: quantity;
}
.sum:after, .mirror::after {
  content: counter(quantity);
}
/* here swap the display order */
.container > .mirror {
  order: 1;
}
.container > ul {
  order: 2;
}
.container > .sum {
  order: 3;
}

<div class="container">
  <ul>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
  </ul>
  <div class="sum"></div>
  <div class="mirror"></div> <!-- will be moved on top of .container with CSS -->
</div>

Answer 3

您可以利用 Flexbox 和 order 属性，它们连同其用法, 要在 列表项 上方显示 计数器 因为 .mirror div 需要放在 [=14= 之后] 中的元素 DOM:

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>

如何将 div:after 的值复制到其他 div

How to copy value of div:after to other div

css

jquery

css-counter