Question

我有一个简单的li元素列表，我想使用 CS S counter() 函数来计算。

＆＃13;

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

＆＃13;

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

＆＃13;

问题是，计数器应位于页面的末尾（在.sum内 - 在需要计算的所有li之后）但我需要在页面顶部（.mirror或.mirror:after内）。

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

Answer 1

问题是DOM是从上到下阅读的，其中包含动态创建的 :after pesudo元素。这些元素在实际写入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选择器，但如果有必要，它可以更加具体。

要将它们重新插入mirror课程，您可以使用 document.getElementsByClassName 选择它，然后使用[0]进行访问。需要[0]，因为document.getElementsByClassName会返回 NodeList 元素集合，并且您需要第一个结果。然后，您只需使用 .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和flex-direction: column CSS3属性，将您的order呈现为在DOM树中的上方。

.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需要放在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>

如何复制div的值：after到其他div

3 个答案: