3

我有一个简单的li元素列表，我想使用CS Scounter() 函数对其进行计数。

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它需要计算在内），但我需要在页面顶部（在.mirroror内.mirror:after）显示它的值。

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

4

3 回答 3

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选择器，但如果需要，它可以很容易地变得更具体。

要将它们插入回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>

希望这可以帮助！:)

于 2018-01-16T01:07:11.773 回答
1

您可以利用Flexbox和order属性及其用法，在列表项上方显示计数器，因为div 需要放在DOM 中的元素之后：.mirrorul

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>

于 2018-01-16T09:23:54.460 回答
1

不幸的是，您无法通过脚本访问此值，也无法将其设置为 DOM 树中可访问的上层变量...

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

.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>

于 2018-01-16T02:01:17.310 回答