Почему этот цикл не выводит модифицированный 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
  })

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>