为每个附加的div赋予唯一的类名称

Question

我正在尝试为每个附加的div赋予唯一的类名。专门用类“ movehere-＃”指代div，我希望它看起来像这样：

<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在每3rd末尾添加一个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>