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> 

は、今私は、私はちょうどこのマップをiteareし、その中に画像のURLを変更することにより、DIV <div class="hex col-sm-6">を動的に生成する方法を理解する必要があるので、私はすでにマップで image urlを持っているように、これは動的にしようとしていますか？私はここでJSTLを使用しています。

私は鍵がtitleであり、値はので、私はこのholderマップを反復処理し、異なる画像のURLを動的にdiv要素を生成する必要がfull image url with httpであるholderと呼ばれる文字列のマップに文字列を持っています。ですから、マップに10個のエントリがある場合は、class="hex col-sm-6"と10個の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のを生成することができますどのように理解することはできませんよ。

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> 

NB：これは、あなたに完全な解決策を提供しないという主なアイデアを提供するためのものです。

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つの値があるとします。この値にはキーがあります。

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