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

Question

与其手动编写“: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。

Answer 1

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

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