javascript - 迭代一个对象并在 4 个不同的 div 中显示数据

Question

我有一个包含多个对象的对象，有点像数组的数组。

我需要遍历它并在 4 个不同的 div 中显示第 2 级数组(即位于主数组内的数组)的字段，当填充第 4 个 div 时，我需要再次显示第 5 个元素第一个分区有点像这样:-

<span class="anchorScroll27j" id="09"></span>
                <h3 class="alphaNew to9" id="09">0 to 9</h3>

                <?php
                    foreach ($categories as $cat) {

                        $categoryName = $cat->getName();
                        if(is_numeric(substr($categoryName, 0, 1))) { ?>                            

                            <div class="col-md-3">
                                <ul class="designer-listing">
                                        <li><a href="<?php echo $cat->getUrl();?>"><?php echo $categoryName;?></a></li>
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <ul class="designer-listing">
                                        <li><a href="<?php echo $cat->getUrl();?>"><?php echo $categoryName;?></a></li>
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <ul class="designer-listing">
                                        <li><a href="<?php echo $cat->getUrl();?>"><?php echo $categoryName;?></a></li>
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <ul class="designer-listing">
                                        <li><a href="<?php echo $cat->getUrl();?>"><?php echo $categoryName;?></a></li>
                                </ul>
                            </div>
                        <?php
                        }
                    }
                ?>


            <div class="clearfix"></div>

这是我在 $categories 中得到的:-

[0] => Array
    (
        [entity_id] => 819
        [entity_type_id] => 3
        [attribute_set_id] => 3
        [parent_id] => 4
        [created_at] => 2015-02-19 10:16:51
        [updated_at] => 2015-02-19 10:16:51
        [path] => 1/2/4/819
        [position] => 288
        [level] => 3
        [children_count] => 0
        [is_active] => 1
        [name] => categoryName
    )
[1] => Array
    (
        [entity_id] => 1333
        [entity_type_id] => 3
        [attribute_set_id] => 3
        [parent_id] => 4
        [created_at] => 2016-04-12 17:52:30
        [updated_at] => 2017-12-04 12:13:44
        [path] => 1/2/4/1333
        [position] => 429
        [level] => 3
        [children_count] => 0
        [is_active] => 1
        [name] => catNAme2
    )

但这里的问题是，当第 5 个元素出现时，它显示在第一个 div 下方，但作为一个单独的 div。但我想要第 5 个元素与第一个元素在同一个 div 中，第 6 个元素与第二个元素在同一个元素中，依此类推。 我该怎么做？

我绞尽脑汁也没有用。我是 html 和 css 的新手，这是我第一天这样做。

Answer 1

使用计数器，并检查每次迭代 并使用以下方式，

如果您循环遍历 div，那么它会在每次迭代中再次生成 div。

<?php
$key = 1;
foreach ($categories as $cat) {

if ($key === 5)
    $key = 1;

if ($key === 1) {
    $div1 = $div1 . '<li><a href="' . $cat->getUrl() . '">' . $cat->getName() . '</a></li>';
} else if ($key === 2) {
    $div2 = $div2 . '<li><a href="' . $cat->getUrl() . '">' . $cat->getName() . '</a></li>';
} else if ($key === 3) {
    $div3 = $div3 . '<li><a href="' . $cat->getUrl() . '">' . $cat->getName() . '</a></li>';
} else if ($key === 4) {
    $div4 = $div4 . '<li><a href="' . $cat->getUrl() . '">' . $cat->getName() . '</a></li>';
}
$key++;
}
?>

<div class="col-md-3">
    <ul class="designer-listing">
        <?php echo $div1; ?>
    </ul>
</div>

<div class="col-md-3">
    <ul class="designer-listing">
        <?php echo $div2; ?>
    </ul>
</div>

<div class="col-md-3">
    <ul class="designer-listing">
        <?php echo $div3; ?>
    </ul>
</div>

<div class="col-md-3">
    <ul class="designer-listing">
        <?php echo $div4; ?>
    </ul>
</div>