Question

我不想手动编写六个“：nth-child（）”实例，而是想使用一个for循环为每个实例编写此CSS。

我将代码的第三行放入控制台，并手动输入数字而不是变量来运行它，它可以按需工作。我正在尝试使用-ms-grid-column来实现IE11兼容性。

detections.record

在运行console.log时，我可以确认循环正确地进行了迭代，似乎并没有改变实际的CSS。

Answer 1

您的操作方式是错误的。您设置的值将是* -text而不是字符串'1'。

Answer 2

尝试：

function gridLayout() {
  for (i = 1; i <= 6; i++) {
    $(".grid-item:nth-child(" + i + ")").css("-ms-grid-column", i);
  }
}

有两个小问题：

1--ms-grid- column将替换为-ms-grid-column 只是语法错误。

2-您应按值而不是字符串形式传递i。

Answer 3

您似乎还有一个额外的}括号。不确定是否支持-ms-grid-column属性。

function gridLayout () {
  for (i = 1; i <= 6; i++) {
    $('.grid-container .grid-item:nth-child('+i+')').css({'background': '#' +i+i+i });
  }
}
gridLayout();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol class="grid-container">
  <li class="grid-item">Item</li>
  <li class="grid-item">Item</li>
  <li class="grid-item">Item</li>
  <li class="grid-item">Item</li>
  <li class="grid-item">Item</li>
  <li class="grid-item">Item</li>
</ol>

为什么此循环不输出修改后的CSS？

3 个答案: