你如何增加 class in jquery for sets of divs

How do you increment a class in jquery for sets of divs

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

这是我目前所拥有的 jquery 只是按顺序递增前 9 个 div 上的 class,这不是我想要的。任何帮助,将不胜感激。谢谢。

<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>

您的脚本应该是:

$(".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>