你如何增加 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>
我有几个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>