javascript - 有什么方法可以复制元素以防止 HTML 中的重复代码？

Question

很抱歉，这可能是一个愚蠢的问题，但我正在写一个餐厅菜单页面，并且想要创建一些方法以在页面上以网格状 (3x5) 模式显示多个食品/描述，而无需手动编码每个有 15 个几乎相同的 div。

任何帮助或解决方案都会很棒！

<div class="menu-column-wrapper">
            <div class="menu-column">
                <div class="menu-item">
                    <div class="item-header">
                        <h3>Item</h3>
                    </div>

                    <div class="item-description">
                        <p>Description</p>
                    </div>
                </div>

这就是我目前设置此菜单部分的方式，具有 3 个单独的“菜单列”div，每个包含 5 个嵌套的“菜单项”div。

多谢你们！

标签： javascripthtmlcss

Answer 1

您可以使用 html 引擎，如车把或ejs等...使用车把，您的 html 代码将锁定如下内容：

<div class="menu-column-wrapper">
   {{#each food}}
    <div class="menu-column">
         <div class="menu-item">
              <div class="item-header">
                   <h3>{{this.Item}}</h3>
              </div>
              <div class="item-description">
                 <p>{{this.Description}}</p>
              </div>
         </div>
    </div>
   {{/each}}
</div>

使用 js 数组：

food [
   {Item: 'item1', Description: 'desc1'},
   {Item: 'item2', Description: 'desc2'},
   {Item: 'item3', Description: 'desc3'}
]