如何通过在jsp页面中使用jstl迭代地图来动态生成div？ [复制]

Posted 2023-02-26

【中文标题】如何通过在jsp页面中使用jstl迭代地图来动态生成div？ [复制]

【英文标题】：How to generate div's dynamically by iterating map using jstl in jsp page? [duplicate]

【发布时间】：2016-10-26 07:33:38

【问题描述】：

我的 jsp 页面中有一个如下所示的 html 的 sn-p，如果我启动该服务，它可以正常工作，因为一切都是静态的。正如您在下面看到的，我在 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">？我在这里使用 JSTL。

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

<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。

【参考方案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>

注意：这是为您提供主要思想，而不是为您提供完整的解决方案。

【讨论】：

非常感谢。这工作得很好。另外，如果我需要知道我是在迭代地图中的第一个元素还是第二个元素或第三个元素，我该怎么做？我只需要一个指示，基本上我需要使用 if 语句添加一个检查，如果它是第一个元素，那么执行此操作，如果它是第二个元素，则执行此操作。

查看***.com/questions/4862605/increment-counter-with-loop

还有这个***.com/questions/4587397/…

【参考方案2】：

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

<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>