Address one element after the other while incrementing

You can use .each loop to iterate through grid div and then use this to assign count to the grid div.

Demo Code :

$(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>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top