如何通过在 jsp 页面中使用 jstl 迭代映射来动态生成 div？

Question

我的 jsp 页面中有一个 html 的片段，如果我启动该服务，它会正常工作，因为一切都是静态的。正如您在下面看到的，我在 div <div class="row templatemorow"> 中显示了不同的图像。只有图像 url 不同，所有其他类字段相同。

<div class="row templatemorow">
    <!-- How to generate these below div dynamically and just change the image url -- >
    <!-- First Image -->
    <div class="hex col-sm-6">
        <div>
            <div class="hexagon hexagon2 gallery-item">
                <div class="hexagon-in1">
                    <div class="hexagon-in2" style="background-image: url(images/gallery/1.jpg);">
                        <div class="overlay">
                            <a href="images/gallery/1.jpg" data-rel="lightbox" class="fa fa-expand"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Second Image -->
    <div class="hex col-sm-6">
        <div>
            <div class="hexagon hexagon2 gallery-item">
                <div class="hexagon-in1">
                    <div class="hexagon-in2" style="background-image: url(images/gallery/2.jpg);">
                        <div class="overlay">
                            <a href="images/gallery/2.jpg" data-rel="lightbox" class="fa fa-expand"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

现在我正在尝试使这个动态化，因为我已经在地图中有 image url 所以我只需要弄清楚如何创建这个地图并动态生成 div <div class="hex col-sm-6">通过更改图像 url 吗？我在这里使用 JSTL。

我有一个名为 holder 的字符串到字符串映射，其中键为 title，值为 full image url with http，因此我需要迭代此 holder 映射并生成 div 动态使用不同的图像 url。因此，如果我在地图中有 10 个条目，那么我猜应该有 10 个 div 和 class="hex col-sm-6" 动态生成。

<div class="row templatemorow">
    <!-- How to generate these below div dynamically and just change the image url -- >

    <c:forEach var="e" items="${images.holder}">

    <!-- iterate holder map and generate div's accordingly -- >


</div>

我是 JSTL 的新手，所以我无法理解如何通过在我的 JSP 页面中迭代 holder 映射来动态生成这些 div。

Answer 1

我不确定我是否理解最后的预期结果应该是什么，所以让我给你一些信息。

要遍历 Map 的条目并获取当前条目的值和键，我们按下一步进行：

<c:forEach var="entry" items="${myMap}">
  Key: <c:out value="${entry.key}"/>
  Value: <c:out value="${entry.value}"/>
</c:forEach>

例如，这里是这样的：

<c:forEach var="e" items="${images.holder}">
<div class="hex col-sm-6">
    <div>
        <div class="hexagon hexagon2 gallery-item">
            <div class="hexagon-in1">
                <div class="hexagon-in2" style="background-image: url(<c:out value="${e.value}"/>);">
                    <div class="overlay">
                        <a href="<c:out value="${e.value}"/>" data-rel="lightbox" class="fa fa-expand"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</c:forEach>

注意：这是为了给你主要思想，而不是给你完整的解决方案。

Answer 2

您始终可以使用 EL 表达式来获取循环中的任何值。

<c:forEach items="${images.holder}" var="e">
           <div class="hex col-sm-6">
               <img src="${e.value}"/>
           </div>     
    </c:forEach>

上面的代码将生成 "X" div，其中 X 是地图的长度。假设您的地图有 3 个值。这个值有它们的键。

然后您的 JSP 页面将生成 3 个 div，例如：

<div class="hex col-sm-6">
     <img src="img/blabla/mypng2.png"/>
</div> 
<div class="hex col-sm-6">
     <img src="img/blabla/mypng4.png"/>
</div> 
<div class="hex col-sm-6">
     <img src="img/blabla/mypng5.png"/>
</div>

如何通过在 jsp 页面中使用 jstl 迭代映射来动态生成 div？

How to generate div's dynamically by iterating map using jstl in jsp page?

jsp

jstl

hashmap