Create an unordered list from a series of elements

This recipe demonstrates how you can create an unordered list from a series of elements.

Rules 

<rules
  xmlns="http://namespaces.plone.org/diazo"
  xmlns:css="http://namespaces.plone.org/diazo/css"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  >
  <replace css:content-children="#content" css:theme-children="#content"/>
  <xsl:template css:match=".listingBar > span,.listingBar > a">
    <li>
      <xsl:copy>
        <xsl:copy-of select="@*" />
        <xsl:apply-templates />
      </xsl:copy>
    </li>
  </xsl:template>
  <xsl:template css:match=".listingBar">
    <div class="pagination-centered">
      <ul class="pagination">
        <xsl:apply-templates />
      </ul>
    </div>
  </xsl:template>
</rules>

Theme 

<html>
  <body>
    <div id="content">
    </div>
  </body>
</html>

Content 

<div id="content">
    <div class="listingBar">
        <span class="next">
            <a href="?b_start:int=20">
                Next
                20
                items
            »
            </a>
        </span>
        [<span>1</span>]
        <a href="?b_start:int=20">2</a>
        <a href="?b_start:int=40">3</a>
        <a href="?b_start:int=60">4</a>
        <a href="?b_start:int=80">5</a>
        <a href="?b_start:int=100">6</a>
        <a href="?b_start:int=120">7</a>
        <span>
            ...
            <a href="?b_start:int=680">35</a>
        </span>
    </div>
</div>

Output 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <div id="content">
    <div class="pagination-centered"><ul class="pagination">
        <li><span class="next">
            <a href="?b_start:int=20">
                Next
                20
                items
            »
            </a>
        </span></li>
        [<li><span>1</span></li>]
        <li><a href="?b_start:int=20">2</a></li>
        <li><a href="?b_start:int=40">3</a></li>
        <li><a href="?b_start:int=60">4</a></li>
        <li><a href="?b_start:int=80">5</a></li>
        <li><a href="?b_start:int=100">6</a></li>
        <li><a href="?b_start:int=120">7</a></li>
        <li><span>
            ...
            <a href="?b_start:int=680">35</a>
        </span></li>
    </ul></div>
</div>
  </body>
</html>