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

Question

I have several divs, and I want to set a class "page-1" on the first 9 divs and "page-2" on the 2nd 9 divs and so on.

This is what I have so far nut the jquery is only increment the class on the first 9 divs in order which is not what I want. Any help would be appreciated. Thank you.

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

Answer 1

Your script should be:

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

This will result to this markup:

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