jsp for每个循环通过图像数组，并将主题放置在特定的div中

Question

我有60个图像，我想在每个div中放置3个图像。

<c:forEach items="${images}" var="image" varStatus="imgCount">
    <c:if test="${imgCount.count == 3 }">
        <div class="${gridImage.displayposition}">
            <img src="${imagePath}${gridImage.image}" />
        </div>
   </c:if>
</c:forEach>

这会是实现这一目标的方法吗？

Answer 1

c:if中的条件只会为真一次：当您在第三项上时。您可以在EL中使用mod或%运算符来处理三组图像。请注意varStatus.count属性-它是基于一而不是基于零的，因此您可以使用${images[imgCount.count]}访问阵列中的下一个映像。

<c:forEach items="${images}" var="image" varStatus="imgCount">
    <c:if test="${(imgCount.count-1) mod 3 eq 0}">
        <div class="${gridImage.displayposition}">
           <img src="${imagePath}${image}/>
           <img src="${imagePath}${images[imgCount.count]}/>
           <img src="${imagePath}${images[imgCount.count+1]}/>
        </div>
    </c:if>
</c:forEach>

您还可以使用forEach标记的step属性，并消除对if语句的需要。在这里，您只需要每隔三个项目创建一个div。然而，计数仍将按1,2,3…的顺序继续（而不是1,4,7…），因此您需要将索引乘以3。

<c:forEach items="${images}" varStatus="imgCount" step="3">
    <div class="${gridImage.displayposition}">
        <img src="${imagePath}${images[3*(imgCount.count-1)]}"/>
        <img src="${imagePath}${images[3*(imgCount.count-1) + 1]}"/>
        <img src="${imagePath}${images[3*(imgCount.count-1) + 2]}"/>
    </div>
</c:forEach>