jquery - 在jsp中循环通过div

Question

我尝试搜索如何执行此操作，但找不到我需要的东西。我有一个数据库，我想要一个 div 显示它的内容。我能够通过表格展示它，并像这样为每个人展示它。

<c:forEach items="${listArtists}" var="artist">
            <tr>
            <td style= "height: 300px; width: 200px"> <img style="height: 100%; width:100%" src="/img/artistphotos/${artist.photo}" alt="" /> </td>
                <td>${artist.artistName}</td>
                <td>${artist.age}</td>
</c:forEach>

现在我想在这个 div 中显示以下数据，而不是在表中创建另一行，而是使用这种格式创建另一个 div 和下一个。

 <div class="col-md-4 col-sm-6 portfolio-item">
                <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fa fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img src="/img/artistphotos/${artist.photo}" class="img-responsive" alt="">
                </a>
                <div class="portfolio-caption">
                    <h4>${artist.artistName}</h4>
                    <p class="text-muted">${artist.age}</p>
                </div>
            </div> 

希望得到帮助和指导。谢谢:)

Answer 1

为什么不简单地采用相同的循环并将 tr 替换为您的 div？

<c:forEach items="${listArtists}" var="artist">
    <div class="col-md-4 col-sm-6 portfolio-item">
        <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
            <div class="portfolio-hover">
                <div class="portfolio-hover-content">
                    <i class="fa fa-plus fa-3x"></i>
                </div>
            </div>
            <img src="/img/artistphotos/${artist.photo}" class="img-responsive" alt="">
        </a>
        <div class="portfolio-caption">
            <h4>${artist.artistName}</h4>
            <p class="text-muted">${artist.age}</p>
        </div>
    </div>
</c:forEach>