编写 jquery 颜色框组的更简洁的方法?或检测有多少类并相应地回显 - Cleaner way to write jquery colorbox groups? or detect how many classes and echo accordingly

Cleaner way to write jquery colorbox groups? or detect how many classes and echo accordingly

我想知道有没有办法以更干净的方式编写它，或者至少以某种方式检测页面上有多少并回显正确的数量？

$(document).ready(function(){
        $("div.projectBlock").each(function(index){
            $(this).find('a').addClass("group" + (index+1));
        });
    $(".group1").colorbox({rel:'group1', slideshow:true});
    $(".group2").colorbox({rel:'group2', slideshow:true});
    $(".group3").colorbox({rel:'group3', slideshow:true});
    $(".group4").colorbox({rel:'group4', slideshow:true});
    $(".group5").colorbox({rel:'group5', slideshow:true});
    $(".group6").colorbox({rel:'group6', slideshow:true});
    $(".group7").colorbox({rel:'group7', slideshow:true});
    $(".group8").colorbox({rel:'group8', slideshow:true});
    $(".group9").colorbox({rel:'group9', slideshow:true});
    $(".group10").colorbox({rel:'group10', slideshow:true});
    $(".group11").colorbox({rel:'group11', slideshow:true});
    $(".group12").colorbox({rel:'group12', slideshow:true});
    $(".group13").colorbox({rel:'group13', slideshow:true});
    $(".group14").colorbox({rel:'group14', slideshow:true});
    $(".group15").colorbox({rel:'group15', slideshow:true});
    $(".group16").colorbox({rel:'group16', slideshow:true});
    $(".group17").colorbox({rel:'group17', slideshow:true});
    $(".group18").colorbox({rel:'group18', slideshow:true});
    $(".group19").colorbox({rel:'group19', slideshow:true});
    $(".group20").colorbox({rel:'group20', slideshow:true});
});

我将其设置在顶部，因此它将 group1、group2 等类添加到页面上的div 上，但我想在它下面的代码中相应地为每个单独的页面显示正确数量的组，以便与 colorbox 一起使用，而不仅仅是添加 20。页面可能会或多或少地包含它们。

$(function(){
  $("div.projectBlock").each(function(index){
    var className = "group" + (index+1);
    $(this).find("a")
    .addClass(className)
    .colorbox({rel:className, slideshow:true});
  });
});