确定元素在可变长度网格中的位置答案

【问题标题】：Determine an elements position in a variable length grid of elements确定元素在可变长度网格中的位置
【发布时间】：2010-05-12 04:15:40
【问题描述】：

我有一个可变数量元素的网格。说每行 5 张图像和可变数量的图像。我需要确定每张图片在哪一列（因为没有更好的词）...即 1、2、3、4 或 5。

在此网格中，图像 1、6、12 和 17 将位于第 1 列，而 4、9 和 15 将位于第 4 列。

1  2  3  4  5 
6  7  8  9  10
12 13 14 15 16
17 18 19

我要做的是根据每个元素的列位置为每个元素应用背景图像。

这个硬编码和不灵活但工作完美的例子（如果我在这里叫错了树，一定告诉我你会如何理想地完成这个，因为当我看到有人问“如何我应该建造一个镀金的太阳能喷气背包来到达这座建筑物的顶部吗？”当他们真的应该问“电梯在哪里？”时）：

switch (imgnum){
                case "1" : case "6" : case "11" :
                    value = "1";
                    break;
                case "2" : case "7" : case "12" :
                    value = "2";
                    break;
                case "3" : case "8" : case "13" :
                    value = "3";
                    break;
                case "4" : case "9" : case "14" :
                    value = "4";
                    break;
                case "5" : case "10" : case "15" :
                    value = "5";
                    break;
                default :
                    value = "";
            }

            $('.someclass > ul').css('background','url("/img/'+value+'.png") no-repeat');

哦，更多信息...该开关中imgnum 的值由点击事件确定。

【问题讨论】：

标签： php javascript switch-statement

【解决方案1】：

对此类工作使用取模运算符。模运算符为您提供整数除法的余数。模数运算符在 PHP 和 JS 中都是 %： http://php.net/manual/en/language.operators.arithmetic.php http://www.java2s.com/Tutorial/JavaScript/0040__Operators/Modulus.htm

你可以用这个替换你的整个代码块：

value = imgnum % 5;
if(value == 0) { value = 5; }
$('.someclass > ul').css('background','url("/img/'+value+'.png") no-repeat');

【讨论】：

哦，当然，如果你想走 EASY 路线 ;)
这是最简单的路线吗？我认为这是解决它的正确方法。模数运算符也可以在 PHP 中使用，如果您想在服务器端执行此操作（只需在变量前面添加一个美元符号即可）。

【解决方案2】：

$row_num = int($imgnum/5, PHP_ROUND_HALF_DOWN);

$column_num = (($row_num * 5) - $imgnum)*-1

【讨论】：

【解决方案3】：

您可以使用jQuery nth child selector，假设您在客户端上执行此操作：

要匹配的每个孩子的索引，从 1 开始，字符串 even 或奇数，或方程（例如。 :nth-child(偶数), :nth-child(4n) )

列号将是索引模 5。

【讨论】：

这有点矫枉过正。当您在 PHP 中拥有所需的所有工具时，无需将另一个完整的库添加到您的设置中。
推论也是正确的：当您可以在浏览器中执行 PHP 时，它本身就是矫枉过正。