Loop with Selectors

by Josh Krauth-Harding

HTML

<div class="container"></div>

CSS

html,
body,
.container {
  height: 100%;
  width: 100%;
}

.imADiv {
  height: 30px;
  width: 30px;
  background: blue;
  margin: 5px;
  display: inline-block;
  padding: 5px;
  color: white;
  text-align: center;
}

JavaScript

$(document).ready(function() {
  for (i = 0; i < 35; i++) {
    $('.container').append('<div class="imADiv" id="div' + i + '">' + i + '</div>');
  }

  /* https://css-tricks.com/snippets/jquery/check-if-element-exists/ */

  if ($('#div20').length > 0) {
    $('#div20').css("background-color", "green");
    $('#div20').append("hi!");
  }

});