Question

我有一个可变数量元素的网格。假设每行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的值由点击事件决定。

Answer 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');

Answer 2

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

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

Answer 3

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

要匹配的每个孩子的索引，从1开始，字符串偶数或奇数或等式（例如：n-child（偶数），：nth-child（4n））

列号将是模5的索引。

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

3 个答案: