Address one element after the other while incrementing

user_14491581 0
Viewed 33

I created a grid in Jquery and would like to give each cell an incrementing number, but I can't get one element with the class .grid, but rather all of them.

I just can't find out how to get one element after the other, so the incrementing number won't get overwritten by the next.

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>

Thanks in advance

jquery
2 Answers

jQuery has an index method.
Here is a PoC :

for(let i=0; i<10; i++) {
  $('ul').append('<li></li>');
}


$('ul li').each(function() {
  $(this).text($(this).index());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>

EDIT : thank to @Pete :

for(let i=0; i<10; i++) {
  $('ul').append('<li></li>');
}

$('ul li').each(function(index) {
  $(this).text(index);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul></ul>

user_68878460

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>

user_106064000
Related