为每个附加的 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 每 3 次添加一个 div，最后添加一个 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'rd 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>