如何在PHP中遍历指定数组并生成对应Div元素

你可以通过遍历数组索引，将对应位置的item、qty、price数据填充到目标HTML结构中，以下是具体实现方式：

1. 定义目标数组 #

$orderData = [
    'item' => [
        'Masaladosa',
        'Zingafry',
        'Idli',
        'Tandoori Baby Corn Mushroom',
        'Bharwan Aloo'
    ],
    'qty' => [2, 4, 2, 2, 2],
    'price' => [320, 800, 70, 560, 560]
];

2. 循环生成HTML结构 #

利用三个子数组索引对应、长度一致的特点，用for循环逐个取出数据并拼接HTML：

// 获取数组长度，确保循环次数准确
$totalItems = count($orderData['item']);

for ($i = 0; $i < $totalItems; $i++) {
    // 取出当前索引的各项数据
    $name = $orderData['item'][$i];
    $qty = $orderData['qty'][$i];
    $price = $orderData['price'][$i];
    
    // 输出HTML结构（用htmlspecialchars转义特殊字符，避免破坏HTML结构或XSS风险）
    echo '<div class="row mt-4 mx-1">';
    echo '    <div class="col-6 text-start item-listmenu">';
    echo '        <p class="bill-order">' . htmlspecialchars($name) . '</p>';
    echo '    </div>';
    echo '    <div class="col-2 text-start">';
    echo '        <p class="bill-order">' . htmlspecialchars($qty) . '</p>';
    echo '    </div>';
    echo '    <div class="col-4 text-end">';
    echo '        <p class="bill-order"><span>&#8377;</span>' . htmlspecialchars($price) . '</p>';
    echo '    </div>';
    echo '</div>';
}

生成的HTML示例（部分） #

<div class="row mt-4 mx-1">
    <div class="col-6 text-start item-listmenu">
        <p class="bill-order">Masaladosa</p>
    </div>
    <div class="col-2 text-start">
        <p class="bill-order">2</p>
    </div>
    <div class="col-4 text-end">
        <p class="bill-order"><span>&#8377;</span>320</p>
    </div>
</div>
<div class="row mt-4 mx-1">
    <div class="col-6 text-start item-listmenu">
        <p class="bill-order">Zingafry</p>
    </div>
    <div class="col-2 text-start">
        <p class="bill-order">4</p>
    </div>
    <div class="col-4 text-end">
        <p class="bill-order"><span>&#8377;</span>800</p>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Tenacious Techno