Question

如何概括以下代码，以便它适用于任意数量的cols？

if (totalColls==4){
    $(aclst).eq(0).css({"top":itlh*0+"px", "left":itlwi*0+"px"});
    $(aclst).eq(1).css({"top":itlh*0+"px", "left":itlwi*1+"px"});
    $(aclst).eq(2).css({"top":itlh*0+"px", "left":itlwi*2+"px"});
    $(aclst).eq(3).css({"top":itlh*0+"px", "left":itlwi*3+"px"});

    $(aclst).eq(4).css({"top":itlh*1+"px", "left":itlwi*0+"px"});
    $(aclst).eq(5).css({"top":itlh*1+"px", "left":itlwi*1+"px"});
    $(aclst).eq(6).css({"top":itlh*1+"px", "left":itlwi*2+"px"});
    $(aclst).eq(7).css({"top":itlh*1+"px", "left":itlwi*3+"px"});

    $(aclst).eq(8).css({"top":itlh*2+"px", "left":itlwi*0+"px"});
    $(aclst).eq(9).css({"top":itlh*2+"px", "left":itlwi*1+"px"});
    $(aclst).eq(10).css({"top":itlh*2+"px", "left":itlwi*2+"px"});
    $(aclst).eq(11).css({"top":itlh*2+"px", "left":itlwi*3+"px"});
}

Answer 1

这适用于任何数量的行或列。

jQuery $（aclst）.each（）函数迭代所有元素，并为回调函数提供正确的索引和DOM节点。
Math.floor（index / totalColls）调用返回行号，从0开始。
index％totalColls 调用返回列号，从0开始。

以下是迭代所有元素时的外观。

$(aclst).each(function(index, element) {

    $(element).css({
        "top" : (itlh * Math.floor(index / totalColls)) + "px",
        "left": (itlwi * index % totalColls) +"px"
    });

});

通用代码来处理任意数量的列

1 个答案: