Javascript 通过jQuery设置CSS计数器增量

我想使用jQuery在“

.demo:before

”上设置CSS计数器增量属性

问题是jQuery无法访问伪元素。另一个S.O.的答案（我现在似乎找不到）建议设置一个数据属性，然后在CSS中使用该值，但这也不起作用。这是可以做到的吗

简化示例：

HTML:

<ul class="demo">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

// 1) User Sets Unit Size
var myUnit = 100;

// 2) Unit size is saved via data attribute
$('.demo li').attr('data-unit', myUnit);

.demo {
    counter-reset: list;
}

.demo li:before {
    /* 3) CSS gets data attribute and applies as the increment. Not working :( */
    counter-increment: list attr(data-unit);
    content: counter(list);
}

CSS:

<ul class="demo">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

// 1) User Sets Unit Size
var myUnit = 100;

// 2) Unit size is saved via data attribute
$('.demo li').attr('data-unit', myUnit);

.demo {
    counter-reset: list;
}

.demo li:before {
    /* 3) CSS gets data attribute and applies as the increment. Not working :( */
    counter-increment: list attr(data-unit);
    content: counter(list);
}

---

为每个

li

而不是

：在
之前增加计数器

实际上，您可以使用css预处理器来编译css

我在下面给出一个使用scss的示例：

它实际上为传递的数字呈现不同的计数器增量。如果您已经知道用于递增的值，则此解决方案将起作用。例如，如果传递的值是
100
、
200
和
300
，则可以使用编译这些已知数字的css

如果您至少知道所传递的值的范围，则可以使用（当数量有限时使用）

（将
data num
属性值更改为200或300）

以下是编译后的css：

.demo[data-num="100"] > li::before {
  counter-increment: list 100;
}

.demo[data-num="200"] > li::before {
  counter-increment: list 200;
}

.demo[data-num="300"] > li::before {
  counter-increment: list 300;
}

.demo {
  counter-reset: list;
}

.demo li:before {
  content: counter(list);
}

给出了公认的答案，没有CSS的净效果基本相同：

var myUnit = 100;
$('.demo').data('unit', myUnit);
$('.demo li').each(function () {
    $(this).text($('.demo').data('unit') * ($(this).index() + 1));
});

陛下如果您使用的是数据属性，是否可以使用
content:attr（数据单元）
并完全跳过计数器部分。有趣的事实：如果不是因为这个事实，您实际上可以编写
计数器增量：list attr（数据单位整数）这样就行了。是的，如果这是唯一的办法，我可以这么做。我只是有一个已经使用css计数器构建的东西，所以我希望我可以修改已经存在的东西。你可能在想。还有其他答案建议直接从脚本中编写CSS，这是最后的选择（除了直接设置
内容
和完全放弃计数器）。虽然这不是我真正想要的，但我的问题似乎没有一个好的答案。既然这是解决问题的更好方法，我接受这个答案。