0

行ごとに5つのタイルで構成されるタイルのグリッドを作成したいのですが、position:absoluteタイルがいくつ存在するかわからないため、タイルをループして上下の位置を動的に追加するJavaScriptを作成したいと思います。 ：

1行目：top：0; left：0、51px、102px ... 2行目：top：51px; 左：0、51px、102px..3行目..。

ループでモジュラスを使用する必要があることを認識していますが、実際には行全体に影響を与えるのではなく、i％4 == 0のような1つのアイテムを選択することに慣れていますか？

誰かが私がこれを達成する方法を説明できますか？

JS

var list = $('ul').children();

for ( var i = 0; i < list.length; i++ ) {

    console.log(i);
    console.log( list[i] );    

    // first 5 top: 0 left: 0,51,102,153,204
    // second 5 top:51 left: 0,51,102,153,204
    // third 5 top: 102 left: 0,51,102,153,204
    $( list[i] ).css({
        left: i*51        
    });   


}

ここでフィドル：http：//jsfiddle.net/Z7TwF/4/

4

2 に答える 2

1 
var list = $('ul').children();

for ( var i = 0; i < list.length; i++ ) {
    $( list[i] ).css({
        top: (parseInt(i / 5) * 51) + "px",
        left: ((i % 5) * 51) + "px"        
    });   
}
于 2012-08-30T11:05:46.640 に答える
1

使用する

left: (i % 5) * 51
top: Math.floor(i / 5) * 51

これにより、除算の余りが5で乗算され、51が乗算されます。最上位の値は切り捨てる必要があります。Javascriptには除法の演算子がありません。

于 2012-08-30T11:01:16.567 に答える