Javascript 以编程方式添加第n个子样式

我希望遵循中列出的模式，使用以下css规则指定项目应显示的位置：

.items li { 
  position: absolute; top: 0; left: 0;
}
.items li:nth-child(1)  { transform: translate3d(0, 0%, 0); }
.items li:nth-child(2)  { transform: translate3d(0, 100%, 0); }
.items li:nth-child(3)  { transform: translate3d(0, 200%, 0); }

但是，我不知道列表中会有多少项，所以我不想像上面那样硬编码30行，而只限于30项。相反，我希望每次添加一个项目时都添加一个样式规则，这意味着我可以拥有无限数量的列表项目

我尝试过各种方法，但不知道如何以编程方式动态添加此类样式规则。任何帮助都将不胜感激。我正在用Dart编写这个应用程序，但Javascript解决方案也同样受欢迎

更新

下面是让我走上正轨的公认答案。它使用jquery，所以我在下面为像我这样使用Dart的人提供了一个版本。Dart版本使用的是我刚刚发现的——我不知道我怎么会错过它。谢谢大家的帮助

import 'dart:html' as Html;
void main(){
  Html.StyleElement styleElement = new Html.StyleElement();
  Html.document.head.append(styleElement);
  Html.CssStyleSheet sheet = styleElement.sheet;
  final rule = 'div { border: 1px solid red; }';
  sheet.insertRule(rule, 0);
}

$（文档）.ready（函数（）{
var li=$（“.li项目”）；
var-add=0；
对于（i=0；i我不确定您到底在寻找什么，但是这个JSFIDLE使用jQuery循环遍历您拥有的每个列表项，并以100%的增量添加相应的css


这是jquery

$(document).ready( function() {
$('.items li').each( function(i){
   var child = i + 1;
    var trans = i + "00%";
    var cssval = 'translate3d(0, ' + trans + ', 0)';
    $(this).css('transform',cssval);
});
});

这就是CSS现在需要的全部内容

.items li { 
  position: absolute; top: 0; left: 0;
}

更新

如果您还试图动态添加或删除它们，这里有一个JSFIDLE用于此。请注意，我确实删除了translate3d和position:absolute CSS样式，因为如果位置是相对的，则动态添加内容要简单得多。如果您正在寻找不同的内容，请告诉我们。：）

您必须获得样式表并将CSS规则添加到其中

addChild = function(i) {
  var styleSheet = document.styleSheets[0];
  var rule = '.items li:nth-child(' + i + ')  { transform: translate3d(0, ' + (i*100) + '%, 0); }';
  styleSheet.insertRule(rule, 1);
}

这将在样式表数组中找到的第一个样式表中添加CSS规则，并在样式表的开头添加该规则。您还可以查找其他样式表或创建新的样式表

有关更多信息，请看。
此模式是否像它看起来那样静态？可能根本没有理由使用javascript进行此操作。您听说过sass/scss/less吗？浏览器不喜欢样式修改。上述工具使生成样式变得非常简单。我没有使用sass/scss或less，但从我所知，它们不会执行我所做的操作这里需要。基本问题是，我需要为未知数量的列表项中的每一项添加一个样式，所以每次向列表中添加一项时，我都需要添加一个样式。我认为sass/scss或更少版本对此没有帮助？好吧。scss允许您定义要生成的css模板，您只需传递一个常量即可执行x次。您可以可以将常量设置为2000。这样根本不执行javascript，您的浏览器会很高兴，因为加载样式将是一次加载+缓存操作。修改样式肯定会触发浏览器重做布局，您希望不惜一切代价避免这种做法可能行得通，但我想要一个jquery较少的解决方案ion（我应该这么说）。谢谢-第二个版本接近我想要的版本，因为它处理动态添加项目。translate3d和相对位置很重要（参见我提到的文章，我认为这很有趣）但是我相信你的建议可以很容易地包含这些方面。没问题！我很高兴你找到了你想要的。只是为了好玩，如果你最终使用JQuery，你可能还想看看JQuery的可排序表。它与此示例的功能类似。谢谢-这是我一直在寻找的，或者至少让我走上了正确的轨道。我将把它标记为已接受的答案，但请参阅我的编辑abov它列出了一个Dart解决方案，并链接到另一个stackoverflow问题，该问题也涉及到它。不知道为什么我之前没有找到这个问题-我确实查找了。无论如何，非常感谢您的帮助。
addChild = function(i) {
  var styleSheet = document.styleSheets[0];
  var rule = '.items li:nth-child(' + i + ')  { transform: translate3d(0, ' + (i*100) + '%, 0); }';
  styleSheet.insertRule(rule, 1);
}