如何使用迭代器以編程方式繪制N個元素的塊

Question

假設，我想通過Struts迭代器實現這一點：

   <div class="carousel-inner">
        <div class="active item">
            <div class="row-fluid">
                <ul class="thumbnails">
                    <li class="span3"><a href="#"><img src="images/sample/clients/client1.png"></a></li>
                    <li class="span3"><a href="#"><img src="images/sample/clients/client2.png"></a></li>
                    <li class="span3"><a href="#"><img src="images/sample/clients/client3.png"></a></li>
                    <li class="span3"><a href="#"><img src="images/sample/clients/client4.png"></a></li>
                </ul>
            </div>
        </div>

        <div class="item">
            <div class="row-fluid">
                <ul class="thumbnails">
                    <li class="span3"><a href="#"><img src="images/sample/clients/client4.png"></a></li>
                    <li class="span3"><a href="#"><img src="images/sample/clients/client3.png"></a></li>
                    <li class="span3"><a href="#"><img src="images/sample/clients/client2.png"></a></li>
                    <li class="span3"><a href="#"><img src="images/sample/clients/client1.png"></a></li>
                </ul>
            </div>
        </div>

        <div class="item">
            <div class="row-fluid">
                <ul class="thumbnails">
                    <li class="span3"><a href="#"><img src="images/sample/clients/client1.png"></a></li>
                    <li class="span3"><a href="#"><img src="images/sample/clients/client2.png"></a></li>
                    <li class="span3"><a href="#"><img src="images/sample/clients/client3.png"></a></li>
                    <li class="span3"><a href="#"><img src="images/sample/clients/client4.png"></a></li>
                </ul>
            </div>
        </div>
    </div>

這是我嘗試過的：

<div class="carousel-inner">
        <div class="active item">
            <div class="row-fluid">
                <ul class="thumbnails">
                  <s:iterator value="members" begin="0" end="3">
                    <li class="span3"><a href="#"><img src="<s:property value='imageUrlPrefix' /><s:property value='imageName'>" /></a></li>
                </ul>
            </div>
        </div>

        <div class="item">
            <div class="row-fluid">
                 <ul class="thumbnails">
                  <s:iterator value="members" begin="3" end="7"> 
                    <li class="span3"><a href="#"><img src="<s:property value='imageUrlPrefix' /><s:property value='imageName'>" /></a></li>
                </ul>
            </div>
        </div>

    </div>

我希望我的struts迭代器創建每個包含4個列表項的項類。 一個類填充了4個列表項后，迭代器必須創建另一個項類。 我該如何實現？

謝謝

Answer 1

您可以使用module運算符（ 如此答案中所述 ）輕松實現此目標：

    <div class="carousel-inner">
        <div class="active item">
            <div class="row-fluid">
                <ul class="thumbnails">                    
<s:iterator value="members" status="ctr" >
                    <li class="span3">
                        <a href="#">
                            <img src="<s:property value='imageUrlPrefix' />
                            <s:property value='imageName'>" />
                        </a>
                    </li>                    
    <s:if test="%{#ctr.count % 4 == 0}" >
                </ul>
            </div>
        </div>                
        <div class="item">
            <div class="row-fluid">
                <ul class="thumbnails">
    </s:if>
</s:iterator>
                </ul>
            </div>
        </div>         
    </div>         

注意：要將active類設置為正確的項目，請在迭代器內部使用<s:if>在外部使用另一個<s:if>來檢查它是否是第一個被激活的元素。