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

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

来源

2010-05-12 Stuart

对此类工作使用模数运算符。模数运算符为您提供整数除法的其余部分。模运算符是% 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');

来源

2010-05-12 04:26:28

哦，当然，如果你想采取简单的方法;） – dclowd9901 2010-05-12 04:27:45

这只是简单的路线在哪里？我认为这是解决问题的正确方法。模数运算符也可以在PHP中使用，如果您想在服务器端执行它（只需在变量前添加一个美元符号，并且您可以顺利执行）。 – 2010-05-12 04:33:18

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

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

来源

2010-05-12 04:26:55 dclowd9901

可以使用jQuery nth child selector，假设你正在做的这在客户端上：

要匹配的每个孩子的指数，从1开始，字符串偶数或者奇数，或者方程式（例如，：第n个孩子（甚至）：第n个孩子（4N））

列数将是指数模5

来源

2010-05-12 04:27:14

这有点矫枉过正。当您拥有PHP所需的所有工具时，无需将另一个完整的库添加到您的设置中。 – dclowd9901 2010-05-12 04:30:37

推论也是如此：当你可以在浏览器中完成时，PHP本身是过度杀伤性的。 – 2010-05-12 04:51:48

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

回答

相关问题