Forループ内の位置に基づいてX変数とY変数を変更する

Question

EDIT - 私は最初に非常にうまく説明したとは思わない。

私は大量のデータを持っています。これは配列内にあり、配列内の各項目はオブジェクトです。私が取り組んでいるシステム（プログラミング言語としてJavaScriptを使用するA/Vデバイスの制御システム）では、配列の長さに基づいてボタンを生成しています。ボタンを配置することができ、配列の各ボタンのX座標とY座標を知ることができます.XとYは行/列です。 （これをUIのX/Yピクセル位置に変換します。

私の初期コードはforループの中にあり、私は手動でボタンの位置を計算しましたが、これは面倒ですこのボタンの異なるグループ/大きさを誇示するために同じ機能。

どこmirage.log =にconsole.logがある。

以下のコードは、ループ

ため

button.element.style.position = 'absolute'; //Do to all Buttons. 
if (i == 0) //First Item 
{ 
    button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = btn_Info.startTop + 'px'; 
} 
else if (i <= btn_Info.numRow-1) //First Column. 
{ 
    mirage.log('Setting Position of First Column'); 
    button.element.style.left = btn_Info.startLeft + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * i + btn_Info.startTop + 'px'; 
} 
else if (i > btn_Info.numRow - 1 && i <= btn_Info.numRow * 2 - 1) 
{ 
    mirage.log('Setting Second column ' + i); 
    button.element.style.left = btn_Info.startLeft + btn_Info.width + btn_Info.hOffset + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i-btn_Info.numRow) + btn_Info.startTop + 'px'; 
} 
else 
{ 
    mirage.log('Setting Third column ' + i); 
    button.element.style.left = btn_Info.startLeft + ((btn_Info.width + btn_Info.hOffset)*2) + 'px'; button.element.style.top = (btn_Info.height + btn_Info.vOffset) * (i - (btn_Info.numRow*2)) + btn_Info.startTop + 'px'; 
} 

おかげの一部であります助けのために前進する - 私はこのフォーラムから多くの答えを手に入れたあなたは素晴らしいです！

EDIT -

私は私が最初の列、次に行を生成する場合、いくつかの調整を得ることができた：

私は友人の助けを借りて、少し近くを取得することができた、とを調整することができます

エンコーダ= { 'ボタン幅'：{'幅'：125、 '高さ'：50、 'numCols'：2、 'numRows'：null; 'vOffset'：次のようにして2列のレイアウトを作成します。 10、 'hOffset'：10}

var posLeft; var posTop;

posLeft = (i % encoder.buttonVals.numCols) * (encoder.buttonVals.width + encoder.buttonVals.hOffset) + encoder.buttonVals.startLeft; 
posTop = Math.floor(i/encoder.buttonVals.numCols) * (encoder.buttonVals.height + encoder.buttonVals.vOffset) + encoder.buttonVals.startTop; 

Answer 1

これで少し作業した後、私が働かなくてはならないコードがあります。行の位置と列の位置の両方が表示されます。

testFunction = function(incRow, incCol){ 
 
\t 
 
\t var myFunc = { 
 
\t  'testLength':0, 
 
\t  'numRows':incRow, 
 
\t  'numCols':incCol, 
 
\t  'array':[], 
 
\t }; 
 
\t myFunc.testLength = incRow * incCol; 
 
\t 
 
\t for(var c=0, posCol = 0, posRow = 0; c < myFunc.testLength; c++) 
 
\t { 
 
     var whichRow;   
 
     posRow = Math.floor(c/myFunc.numRows); 
 
     whichRow = Math.floor(c/myFunc.numRows) + c; 
 
     if (whichRow > myFunc.numRows) 
 
     { 
 
      whichRow = whichRow - (myFunc.numRows * posRow) - posRow; 
 
      if (whichRow === 0) 
 
      { 
 
       posCol = posCol + 1; 
 
      } 
 
     } 
 
     console.log(c + ' : ' + whichRow + ' : ' + posCol);  
 
\t } 
 
}; 
 

 

 
testFunction(6,4);