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

【问题标题】：Add a nth-child style programmatically以编程方式添加第 n 个子样式
【发布时间】：2015-09-03 12:41:31
【问题描述】：

我想遵循this blog 中规定的模式，它使用以下 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 版本使用我刚刚找到的How do I dynamically add a stylesheet using 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);
}

【问题讨论】：

这种模式是否像看起来那样静态？可能根本没有理由在 javascript 中执行此操作。你听说过 sass/scss/less 吗？浏览器不喜欢样式修改。上述工具使生成样式变得非常容易。
我没有使用过 sass/scss 或更少，但据我所知，他们在这里没有做我需要的事情。基本问题是我需要为 unknown 数量的列表项中的每个设置一个样式，因此每次向列表中添加一个项时我都需要添加一个样式。我认为 sass/scss 或更少对此没有帮助？
好吧。 scss 允许您定义要生成的 css 模板，您只需传递一个常量即可执行 x 次。您可以将常量设置为 2000。这样根本不会执行任何 javascript，并且您的浏览器会很高兴，因为加载样式将是一次加载+缓存操作。修改样式肯定会触发浏览器重做布局，这是您要不惜一切代价避免的

标签： javascript html dart

【解决方案1】：

你必须得到一个样式表并向它添加 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 规则添加到样式表数组中的第一个样式表，并将该规则添加到样式表的开头。您还可以查找另一个样式表或创建一个新样式表。

更多信息请查看here。

【讨论】：

谢谢 - 这是我一直在寻找的，或者至少让我走上了正确的道路。我将把它标记为已接受的答案，但请参阅上面的编辑，其中列出了 Dart 解决方案和指向另一个也处理它的 stackoverflow 问题的链接。不知道为什么我没有早点找到那个——我确实看过。无论如何，非常感谢您的帮助。

【解决方案2】：

我不确定您到底在寻找什么，但这个 jsfiddle 使用 jQuery 循环遍历您拥有的每个列表项并添加相应的 css，增量为 100%。

http://jsfiddle.net/2ub4hj1o/

这里是 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;
}

更新

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

http://jsfiddle.net/2ub4hj1o/1/

【讨论】：

谢谢 - 第二个版本接近我想要的，因为它处理动态添加项目。 translate3d 和相对位置很重要（请参阅我提到的我认为非常有趣的文章），但我相信您的建议可以很容易地适应包括这些方面。但是，我真的在寻找一个没有 jquery 的解决方案（对不起——我应该这么说）。
没问题！我很高兴你找到了你要找的东西。只是为了好玩，如果您最终使用 JQuery，您可能还想看看 JQuery 的 sortable。它类似于此示例所做的。 jqueryui.com/sortable

【解决方案3】：

<script>
$(document).ready(function () {
    var li = $(".items li");
    var add = 0;
    for(i = 0;i<li.length;i++){
        $(li[i]).css({"transform":"translate3d(0, "+add+"%, 0)"});
        add +=100;
    }
});
</script>

【讨论】：

这种方法可能会奏效，但我想要一个没有 jquery 的解决方案（我应该这么说）。