jsp forEach Loop通过图像阵列并将主题放置在特定的div中

Question

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

<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 ...）的顺序继续进行，因此您需要将索引乘以三。

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