为什么这个循环不输出修改后的 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 + "'"})
    }
  }

运行控制台.log时，我可以确认循环正在正确迭代，它似乎没有改变实际的 CSS。

Answer 1

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

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

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>