Дайте уникальное имя класса каждому добавленному div

Question

Я пытаюсь дать уникальное имя класса каждому добавляемому div.В частности, ссылаясь на div с классом «movehere- #», я бы хотел, чтобы это выглядело так:

<section>
  <div></div>
  <div></div>
  <div></div>
  <div class="movehere-0">
  </div>
  <div></div>
  <div></div>
  <div></div>
  <div class="movehere-1">
  </div>
  <div></div>
  <div></div>
  <div class="movehere-2">
  </div>
</section>

Это оригинальный код.JQuery добавляет div для каждого третьего и в самом конце.Он добавляется с классом "movehere".Как вы даете ему уникальный класс "movehere - #"?

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<script>

$("div > div:nth-child(3n), div:last-child")
.after('<div class="movehere"></div>');
</script>

Я начинающий программист и буду признателен за любые объяснения:)

Answer 1

Вы можете сделать что-то вроде этого:

$('section > div:nth-child(3n)').each(function(i,x) {
  $(this).addClass("movehere-" + i);
})

Это добавит класс к каждому 3-му Div в вашем разделе.

Демо

$('section > div:nth-child(3n)').each(function(i, x) {
  $(this).addClass("movehere-" + i);
})

div[class^="movehere"] {
  color: blue;
  font-size: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</section>