如何使用 EJS 循环遍历 JSON，同时能够分别设置每个项目的样式

Question

我试图在使用 EJS 的同时遍历 JSON 文件并将每个对象的样式设置为卡片，但它总是看起来像在它之前循环遍历的每个对象中的子元素。

这是我当前的 EJS 代码

<section class="job-list">

    <% if (job.length > 0) { %>
        <div class="grid">
            <%for(var i = 0; i < job.length; i++){ %> 
                <article class="card listing-item">
                    <header class="card__header">
                        <img src="<%= job[i].logo %>" alt="">

                    </header>
                    <div class="card__content">
                        <div class="card_content_top">
                            <p class="position_postedAt"><%= job[i].postedAt %></p>
                            <p class="position_contract"><%= job[i].contract %></p>
                        </div>
                        <div class="card_content_bottom">
                            <h1 class="position__position"><%= job[i].position %></h1>
                            <h3 class="position__company">$<%= job[i].company %></h3>
                            <p class="position__location"><%= job[i].location %></p>

                        </div>

                    </div>
                    
            <% } %>        
        </div>
    <% } else { %>
        <h1>No Jobs found today!</h1>    
        <% } %>

</section>

我目前正在收到这个：

试图让它看起来像单独的卡片：

我试过使用带有 grid class 和 listing-item class 的网格，但它总是在其他网格中设置样式。

Answer 1

我认为您缺少 article html 元素的结束标记 </article>。

文章 HTML 标签：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article

如何使用 EJS 循环遍历 JSON，同时能够分别设置每个项目的样式

How to loop through a JSON with EJS while being able to style each item separately

javascript

json

ejs