How to programmatically draw blocks of N elements using an Iterator

Question

Let's say, I want to achieve this with Struts iterator:

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

This is what I have tried:

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

I want my struts iterator to create item classes with 4 list items each. Once a class is filled with 4 list items, the iterator must create another item class. How can I achieve this?

Thank you

Answer 1

You can achieve this pretty easily by using the module operator (as described in this answer ):

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

Note: to set the active class to the right item, use an <s:if> inside the iterator, and another one outside to check if it's the first element to be active.