jquery - 在递增时一个接一个地寻址元素

Question

我在 Jquery 中创建了一个网格，并想给每个单元格一个递增的数字，但我无法使用类 .grid 获得一个元素，而是所有这些。
我只是不知道如何一个接一个地获取一个元素，所以递增的数字不会被下一个覆盖。

function gridBau() {
  for (var rows = 0; rows < 9; rows++) {
    for (var columns = 0; columns < 6; columns++) {
      $("#container").append("<div class='grid'></div>");
    }
  }
  var width = $("#container").css('width');
  var height = $('#container').css('height');
  height = height.slice(0, -2);
  width = width.slice(0, -2);
  $('.grid').css('width', (width / 9));
  $('.grid').css('height', (height / 6));
}
gridBau();

var stopper = $('.grid').length;
var counter = 1;

function gridCount() {
  for (var i = 0; i < stopper; i++) {
    console.log(this);
    $('.grid').text(counter);
    counter++;
  }
}
gridCount();

body {
  margin: 0;
  box-sizing: border-box;
}

#container {
  height: 100vh;
  width: 100%;
  border: solid black 4px;
  box-sizing: border-box;
  overflow: hidden;
}

.grid {
  border: solid rgb(220, 8, 8) 2px;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>

提前致谢

Answer 1

您可以使用 .each循环遍历 grid div 然后使用 this将计数分配给网格 div。
演示代码 :

$(document).ready(function() {

  function gridBau() {
    for (var rows = 0; rows < 9; rows++) {
      for (var columns = 0; columns < 6; columns++) {
        $("#container").append("<div class='grid'></div>");
      }
      gridCount();//call to add count
    }
    var width = $("#container").css('width');
    var height = $('#container').css('height');
    height = height.slice(0, -2);
    width = width.slice(0, -2);
    $('.grid').css('width', (width / 9));
    $('.grid').css('height', (height / 6));
  }
  gridBau();

  var stopper = $('.grid').length;
 

  function gridCount() {
   var counter = 1;
   //use each to loop through grid
    $(".grid").each(function(index) {  
      $(this).text(counter);
      counter++;

    })
  }

});

#container {
  height: 100vh;
  width: 100%;
  border: solid black 4px;
  box-sizing: border-box;
  overflow: hidden;
}

.grid {
  border: solid rgb(220, 8, 8) 2px;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>