0

这应该很容易，它可能只涉及数学。我有一个三列布局，我想为从我的数据库返回的每个项目附加 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（例如，我假设是 your 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

你可能想试试这个插件？分柱器 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

这就是我要做的，只需遍历每一列，然后遍历每一列的每个值。这似乎是您试图达到的最终解决方案。

<?
$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

您可以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 回答