你如何在jquery中为一组div增加一个类答案

【问题标题】：How do you increment a class in jquery for sets of divs你如何在jquery中为一组div增加一个类
【发布时间】：2021-03-28 18:02:39
【问题描述】：

我有几个 div，我想在前 9 个 div 上设置一个类“page-1”，在第二个 9 div 上设置一个“page-2”等等。

这就是我到目前为止所知道的，jquery 只是按顺序递增前 9 个 div 上的类，这不是我想要的。任何帮助，将不胜感激。谢谢。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  
<div class="wrapper">
    
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>

   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>

   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>

</div> 
  
  
<script>
$(".wrapper > div").each(function(ix) {
   $(this).addClass('page-'+ ((ix%9)+1) );
    return (ix < 8)
})
</script>

【问题讨论】：

向我们展示您的尝试。 SO 不是免费的代码编写服务。此处的目的是让您发布解决自己问题的尝试，并在其他人无法按预期工作时提供帮助。见How to Ask 和minimal reproducible example
我没有展示我的尝试吗？不知道你想说什么或意思，我很欣赏下面的弗兰克斯更正。

标签： jquery each increment

【解决方案1】：

你的脚本应该是：

$(".wrapper > div").each(function(ix) {
   $(this).addClass('page-'+ (Math.floor(ix/9) + 1));
});

这将导致这个标记：

<div class="wrapper">   

   <div class="page-1">Content</div>
   <div class="page-1">Content</div>
   <div class="page-1">Content</div>
   <div class="page-1">Content</div>
   <div class="page-1">Content</div>
   <div class="page-1">Content</div>
   <div class="page-1">Content</div>
   <div class="page-1">Content</div>
   <div class="page-1">Content</div>
   
   <div class="page-2">Content</div>
   <div class="page-2">Content</div>
   <div class="page-2">Content</div>
   <div class="page-2">Content</div>
   <div class="page-2">Content</div>
   <div class="page-2">Content</div>
   <div class="page-2">Content</div>
   <div class="page-2">Content</div>
   <div class="page-2">Content</div>
   
   <div class="page-3">Content</div>
   <div class="page-3">Content</div>
   <div class="page-3">Content</div>
   <div class="page-3">Content</div>
   <div class="page-3">Content</div>
   <div class="page-3">Content</div>
   <div class="page-3">Content</div>
   <div class="page-3">Content</div>
   <div class="page-3">Content</div>

   <div class="page-4">Content</div>
   <div class="page-4">Content</div>
   <div class="page-4">Content</div>
   <div class="page-4">Content</div>
   <div class="page-4">Content</div>
   <div class="page-4">Content</div>
   <div class="page-4">Content</div>
   <div class="page-4">Content</div>
   <div class="page-4">Content</div>

   <div class="page-5">Content</div>
   <div class="page-5">Content</div>
   <div class="page-5">Content</div>
   <div class="page-5">Content</div>
   <div class="page-5">Content</div>
   <div class="page-5">Content</div>
   <div class="page-5">Content</div>
   <div class="page-5">Content</div>
   <div class="page-5">Content</div>

</div>

【讨论】：