0

これは簡単なはずですが、おそらく数学のみが含まれます。3 列のレイアウトがあり、データベースから返された各アイテムに jQuery の折りたたみ可能な div を追加したいと考えています。

例: データベースから 9 つのアイテムを返す場合:

column 1 = 1, 4, 7
column 2 = 2, 5, 8
column 3 = 3, 6, 9

これが私がこれまでに持っているものです：

if (centerCount == 1 || centerCount == 4 || centerCount == 7)
{   
// add to column 1                  
}
else if (centerCount == 2 || centerCount == 5 || centerCount == 8)
{
    // add to column 2
}
else if (centerCount == 3 || centerCount == 6 || centerCount == 9)
{
    // add to column 3
}

上記は、アイテム数が 9 であると仮定しています。返されるアイテム数が分からない場合はどうすればよいですか?

4

6 に答える 6

2

連続した ID がある場合 (たとえば、あなたの のようにcenterCount)、モジュロ演算子を使用して次のコードを使用できます%。

var col = centerCount % 3;

switch( col ) {
  case 0: // first column
    break;
  case 1: // second column
    break;
  case 2: // third column
    break;
}
于 2012-12-22T17:59:31.297 に答える
1

非常に単純な係数でうまくいきます

if (centerCount % 3 == 1) {
    // add to column 1
} 
else if (centerCount % 3 == 2) {
    // add to column 2
} 
else if (centerCount % 3 == 0) {
    // add to column 3
}
于 2012-12-22T18:01:24.003 に答える
0

これが私が行うことです。各列を反復処理してから、各列の各値を反復処理します。これは、あなたが到達しようとしている最終的な解決策のようです。

<?
$columns = array(
    array(1,4,7,5,34,5,5),
    array(2,5,6,5,3,6,2),
    array(3,6,9,5,4,3,2)
)
?>
<table>
    <tr>
        <? for($x = 0; $x < count($columns); $x++) { ?>
        <td>
            <? foreach($columns[$x] as $column_value) { ?>
            <?= $column_value ?><br />
            <? } ?>
        </td>
        <? } ?>
    </tr>
</table>
于 2012-12-22T18:04:14.260 に答える
0

このプラグインを試してみませんか？カラムナイザー jQuery プラグイン

それがあなたのニーズを満たすかどうかわからない？

于 2012-12-22T18:02:16.720 に答える
0 
var col = centerCount % 3;

switch( col ) {
  case 1: // first column
    break;
  case 2: // second column
    break;
  case 0: // third column
    break;
}
于 2012-12-22T18:03:10.300 に答える
0

slice()と組み合わせて使用​​してwrapAll、列ラッパーで要素をラップできるため、配列を作成する必要はなく、合計アイテムに基づいて計算を行うだけです

var $divs = $('#content div');
var totDiv = $divs.length,
    start = 0,
    itemsPerColumn = Math.ceil(totDiv / 3);

for (i = 0; i < 3; i++) {
    var end = start + itemsPerDiv;
    $divs.slice(start, end).wrapAll('<div class="column">')
    start = end
}

デモ: http://jsfiddle.net/WHNgP/

または、データの配列から要素を作成している場合は、html の作成中にネイティブの JavaScript スライスを使用して配列で同じことを行います。

API リファレンス: http://api.jquery.com/slice/

于 2012-12-22T18:14:31.787 に答える