如何在jquery中为div集增加一个类

Question

我有几个div，我想设置一个类"第1页"；在前9个div上；第2页"；在第2次9次潜水等等。

这就是我到目前为止所知道的，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>

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