为什么这个循环不输出修改后的 CSS？答案

【问题标题】：Why isn't this loop outputting the modified CSS?为什么这个循环不输出修改后的 CSS？
【发布时间】：2019-11-04 13:06:00
【问题描述】：

我不想手动编写六个“:nth-child()”实例，而是使用 for 循环为每个实例编写这个 CSS。

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

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

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

【问题讨论】：

查看字符串模板，例如.grid-item:nth-child${i}
'-ms-grid- column' -> '-ms-grid-column'?
为什么是幻数6？ $(".grid-container .grid-item").css("-ms-grid-column", (idx) => (idx + 1))
@Andreas，我将使用的页面上只有六个该元素的实例。感谢您对此的反馈。我会看看你的建议。
以后考虑建一个runnable snippet

标签： javascript jquery css for-loop

【解决方案1】：

你这样做的方式是错误的。您设置的值将是 '1' 而不是 1 的字符串。

$('.grid-container .grid-item:nth-child(' + i + ')')
  .css({
    '-ms-grid-column': i
  })

【讨论】：

有趣的是，你提到了。我最初实际上是这样实现的，但是没有引号就不会通过。我会回去看看那个。谢谢。

【解决方案2】：

您似乎多了一个} 括号。不确定是否支持 -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>

【讨论】：

这就是我应该停止使用手机键盘的原因??

【解决方案3】：

试试这个：

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。

【讨论】：

感谢您的帮助，但仅代码的答案不是很有用。解释你做了什么以及为什么，或者在你的代码中添加一些 cmets，或者两者兼而有之。