代码之家  ›  专栏  ›  技术社区  ›  rg88

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

  •  0
  • rg88  · 技术社区  · 14 年前

    我有一个元素数量可变的网格。假设每行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 在该开关中,由单击事件确定。

    3 回复  |  直到 14 年前
        1
  •  1
  •   Emil Vikström    14 年前

    对于这种类型的工作,使用模数运算符。模运算符给出整数除法的余数。模运算符是 % 在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');
    
        2
  •  1
  •   dclowd9901    14 年前
    $row_num = int($imgnum/5, PHP_ROUND_HALF_DOWN);
    
    $column_num = (($row_num * 5) - $imgnum)*-1
    
        3
  •  1
  •   Diodeus - James MacFarlane    14 年前

    你可以使用 jQuery nth child selector ,假设您在客户机上执行此操作:

    要匹配的每个子级的索引, 从1开始,字符串偶数或 奇数或方程式(如 :nth child(偶数),:nth child(4n))

    列号将是索引模块5。