使用FOR循环在DIV内部动态显示内容

时间:2018-10-18 03:37:59

标签: php html

标题说明:我真的不知道如何完美地命名这个问题。如果有人可以建议一个更合适的标题,请这样做。

长话短说:我需要在一个父<div>标签内显示9个子<div>标签。

如果要显示11个<div>标签,我需要有2个父<div>标签,其中第一个有9个孩子<div>,第二个有2个孩子div>。'< / p>

functions.php:

$display = 0;
$x = 0;

for ($divs=0; $divs < $total_divs; $divs++) { 
    echo '<div class="w3-display-container" style="height: 300px;">';

    for (; $x < count($test_cases); $x++) {

        if ($display > 8) {
            $display = 0;
        }

        echo '<div class="' . $displays[$display] . ' w3-padding">';
        echo '<form target="_blank" action="./test.php" method="get">';
        echo '<input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="' . $test_cases[$x] . '" name="test">';
        echo '</form>';
        echo '</div>';

        $display++;
    }

    echo '</div>';
}

问题:我们假设有11个孩子<div>。除了所有子<div>标签都输出到第一个父<div>中之外,其他所有操作均正常。第二父级<div>为空。我在HTML脚本的最底部留下了评论。如您所见,第十和第十一个标签会覆盖第一和第二个标签。

我需要在第一个父级<div>中显示前9个<div>,在第二个父级<div>中显示其余2个<div>标签。为了实现它,我需要将第九个后的每个子<div>标签输出到第二个父<div>中。 我该怎么做?

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-container w3-padding-32">
			<div class="w3-display-container" style="height: 300px;">
        <div class="w3-display-topleft w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="first" name="test-case"></form></div><div class="w3-display-topmiddle w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="second" name="test-case"></form></div><div class="w3-display-topright w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="third" name="test-case"></form></div><div class="w3-display-left w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="fourth" name="test-case"></form></div><div class="w3-display-middle w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="fifth" name="test-case"></form></div><div class="w3-display-right w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="sixth" name="test-case"></form></div><div class="w3-display-bottomleft w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="seventh" name="test-case"></form></div><div class="w3-display-bottommiddle w3-padding"><form target="_blank" action="./report.php" method="get">
        
        <input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="eigth" name="test-case"></form></div><div class="w3-display-bottomright w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="ninth" name="test-case"></form></div><div class="w3-display-topleft w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="tenth" name="test-case"></form></div><div class="w3-display-topmiddle w3-padding"><form target="_blank" action="./report.php" method="get"><input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="eleventh" name="test-case"></form></div></div>
        <!-- This div should contain tenth and eleventh child divs -->
        <div class="w3-display-container" style="height: 300px;"></div>			
	</div>

5 个答案:

答案 0 :(得分:0)

使用array_splice将divs数组拆分为多个块,然后循环播放新数组。

我首先在9上计算mod的剩余部分。
在这种情况下2.
然后,如果$ rem不为零,则添加这两项并将它们添加到$ chunks中。
然后循环播放,直到所有项目都移至$ chunks。

然后我只需要做一个嵌套的foreach来回显它们。

$divs = range(1,11);

$rem = count($divs)%9;
if($rem) $chunks[] = array_splice($divs,0,$rem);
while(count($divs)){
    $chunks[] = array_splice($divs,0,9);
}

foreach($chunks as $chunk){
    echo "<div>\n";
    foreach($chunk as $div){
        echo "    <div>" . $div . "</div>\n";
    }
    echo "</div>\n";
}

https://3v4l.org/dfdfk

答案 1 :(得分:0)

不清楚这里发生了什么,但将div分成9个一组,其余似乎正确

<?php

// boundary
$b = 9;
// number of divs
$div_cnt = 12;
// make an array of placeholder (just for demo)
$divs = array_fill(0, $div_cnt, 1);
// split divs into chunks
$chunks = array_chunk($divs, $b);
// loop over chunks
foreach($chunks as $chunk) {
    // ignore if chunk has less than 2 items
    if(count($chunk) < 2) continue;
    // print the first div
    echo '<div class="w3-display-container" style="height: 300px;">';
    // remove first item (probably want to do something with it)
    array_shift($chunk);
    // set index
    $i = 0;
    // loop over remaining
    foreach($chunk as $c) {
        echo '<div class="' . $displays[$o] . ' w3-padding">';
        echo '<form target="_blank" action="./test.php" method="get">';
        echo '<input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="' . $test_cases[$i] . '" name="test">';
        echo '</form>';
        echo '</div>';
    }
}

答案 2 :(得分:0)

我只需要在适当的时候突破内循环:

$display = 0;
$x = 0;

for ($divs=0; $divs < $total_divs; $divs++) { 
    echo '<div class="w3-display-container" style="height: 300px;">';

    for (; $x < count($test_cases);) {

        if ($display > 8) {
            $display = 0;
        }

        echo '<div class="' . $displays[$display] . ' w3-padding">';
        echo '<form target="_blank" action="./test.php" method="get">';
        echo '<input type="Submit" class="w3-button w3-hover-gray w3-blue w3-padding-large w3-round-xlarge w3-xlarge" value="' . $test_cases[$x] . '" name="test">';
        echo '</form>';
        echo '</div>';

        $x++;
        $display++;

        // Solution
        if ($x !== 0 && $x % 9 === 0) {
            break;
        }
    }

    echo '</div>';
}

答案 3 :(得分:0)

defaultProject

输出:

<?php
$total  = 3; // total inner divs.
$chunks = 2; // amount of inner divs in each div sandwich

for (
    $outer_limit = ceil($total / $chunks), $parent = 0, $counter = 0;
    $parent < $outer_limit;
    $parent++
) { 
    echo "<div class='outer'>\n";
    for (
        $child = 0;
        $child < $chunks && $counter < $total;
        $child++, $counter++
    ) {
        echo "\t<div class='inner'>\n";
        printf(
            "\t\tParent: %d, Child: %d, Counter: %d\n",
            $parent,
            $child,
            $counter
        );
        echo "\t</div>\n";
    }
    echo "</div>\n";
}

答案 4 :(得分:0)

<?php
        define("INTERVAL",9);
        function html_div($total_divs)
        {
                $close = "";
                for($case = 0; $case< $total_divs;++$case)
                {
                        $display = $case % INTERVAL; // 0.. 8, print every 0th time
                        if (0 == $display) // true on every 9th div
                                echo "${close}\n<DIV CLASS = \"container\">\n";
                        echo "<div class=\"${display}\" value=\"${case}\"></div>\n";
                        if (0 == $case)
                                $close = "</DIV>";
                }
                echo "${close}\n";
        }

        html_div(23);
        html_div(0);
?>

输出:

<DIV CLASS = "container">
<div class="0" value="0"></div>
<div class="1" value="1"></div>
<div class="2" value="2"></div>
<div class="3" value="3"></div>
<div class="4" value="4"></div>
<div class="5" value="5"></div>
<div class="6" value="6"></div>
<div class="7" value="7"></div>
<div class="8" value="8"></div>
</DIV>
<DIV CLASS = "container">
<div class="0" value="9"></div>
<div class="1" value="10"></div>
<div class="2" value="11"></div>
<div class="3" value="12"></div>
<div class="4" value="13"></div>
<div class="5" value="14"></div>
<div class="6" value="15"></div>
<div class="7" value="16"></div>
<div class="8" value="17"></div>
</DIV>
<DIV CLASS = "container">
<div class="0" value="18"></div>
<div class="1" value="19"></div>
<div class="2" value="20"></div>
<div class="3" value="21"></div>
<div class="4" value="22"></div>
</DIV>