Javascript 你能简化和概括这个有用的jQuery函数吗？

我正在做一个电子商店，和往常一样，商品在网格中显示为“瓷砖”。我只想使用各种大小的瓷砖，并确保（通过jQuery）没有空闲空间

在基本情况下，我有一个960px包装器，希望使用240x180px（class.grid_4）tile和480x360px（class.grid_8）tile。请参见图（想象没有边距/填充）：

没有jQuery的问题：

• 当CMS提供第6个大磁贴时，第5个磁贴下方将有一个可用空间
• 当CMS提供第7个大磁贴时，第5个和第6个磁贴下方将有一个可用空间
• 当CMS提供大瓷砖作为第8行时，它将切换到下一行，留下第8位的空闲位置

到目前为止，我的解决方案如下所示：

$(".grid_8").each(function(){
        //console.log("BIG on position "+($(this).index()+1)+" which is "+(($(this).index()+1)%2?"ODD":"EVEN"));

        switch (($(this).index()+1)%4) {

            case 1:
                // nothing needed
                //console.log("case 1");
                break;

            case 2:
                //need to shift one position and wrap into 240px div
                //console.log("case 2");
                $(this).insertAfter($(this).next()); //swaps this with next
                $(this).prevAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />");

                break;

            case 3:
                //need to shift two positions and wrap into 480px div
                //console.log("case 3");
                $(this).prevAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />"); //wraps previous two - forcing them into column 
                $(this).nextAll(":nth(0), :nth(1)").wrapAll("<div class=\"grid_4\" />"); //wraps next two - forcing them into column
                $(this).insertAfter($(this).next()); //moves behind the second column
                break;

            case 0:
                //need to shift one position
                //console.log("case 4");
                $(this).insertAfter($(this).next());
                //console.log("shifted to next line");
                break;

        }

    }); 

$（“.grid_8”）。每个（函数（）{
//log（“位置上的大“+（$（this.index（）+1）+”是“+（$（this.index（）+1）%2？”奇数）：“偶数”）；
开关（$（this.index（）+1）%4）{
案例1：
//不需要
//控制台日志（“案例1”）；
打破
案例2：
//需要移动一个位置并包装成240px div
//控制台日志（“案例2”）；
$（this.insertAfter（$（this.next（））；//将其与next交换
$（this.prevAll（“：nth（0），：nth（1）”）.wrapAll（“）；
打破
案例3：
//需要移动两个位置，并包装成480px div
//控制台日志（“案例3”）；
$（this.prevAll（“：nth（0），：nth（1）”）.wrapAll（“”；//包装前两个-强制将它们放入列中
$（this.nextAll（：nth（0），：nth（1）”）.wrapAll（“”；//包装下两个-强制将它们放入列中
$（this.insertAfter（$（this.next（））；//移到第二列后面
打破
案例0：
//需要换一个位置
//控制台日志（“案例4”）；
$（this.insertAfter（$（this.next（））；
//console.log（“移到下一行”）；
打破
}
}); 

从注释中可以明显看出它是如何工作的——通常，如果需要，通过向后移动一个位置来确保大磁贴位于奇数位置（前面的小磁贴计数为偶数）。另外，从大平铺到左边的小平铺需要用另一个div包装，以便它们显示在列中而不是行中

现在最后是问题：

• 如何推广该函数，以便我可以使用更多的瓷砖尺寸，如720x360（3x2）、480x540（2x3）等
• 有没有办法简化这个函数
• 我需要确保在检查实际位置时，大瓷砖被视为小瓷砖的倍数。因为在位置12（第三行的最后一个磁贴）上使用index（）现在将返回7（位置8），因为位置5和9上的磁贴被包装在一列中，并且大磁贴也只是一个div，但跨越2x2个位置。有没有干净的方法来确保这一点

非常感谢您的任何提示。请随意重用代码，我认为它会很有用

---

Josef

听起来您需要使用名为Massey的jQuery插件

---

你可以找到它

这对你来说够简单了吗

$(".grid_8")
.each(function () {
switch (($(this)
    .index() + 1) % 4) {
    case 1:
        break;
    case 2:
        $(this)
            .insertAfter($(this)
            .next()), $(this)
            .prevAll(":nth(0), :nth(1)")
            .wrapAll('<div class="grid_4" />');
        break;
    case 3:
        $(this)
            .prevAll(":nth(0), :nth(1)")
            .wrapAll('<div class="grid_4" />'), $(this)
            .nextAll(":nth(0), :nth(1)")
            .wrapAll('<div class="grid_4" />'), $(this)
            .insertAfter($(this)
            .next());
        break;
    case 0:
        $(this)
            .insertAfter($(this)
            .next())
}
})

$（“.grid_8”）
.每个（功能）{
开关（$（此）
.index（）+1）%4）{
案例1：
打破
案例2：
$（本）
.insertAfter（$（此）
.next（），$（此）
.prevAll（“：n（0），：n（1）”）
.wrapAll（“”）；
打破
案例3：
$（本）
.prevAll（“：n（0），：n（1）”）
.wrapAll（“”），$（本）
.nextAll（“：n（0），：n（1）”）
.wrapAll（“”），$（本）
.insertAfter（$（此）
.next（））；
打破
案例0：
$（本）
.insertAfter（$（此）
.next（））
}
})

看起来棒极了！我现在要找到它的用途了，哈哈，哇！我在找类似的东西，但没有用。显然，我需要提高我的谷歌搜索技能。谢谢！了解上述问题的答案可能仍然有用