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>