XSLT - 带变量的循环，计数，位置（）

时间：2012-06-02 13:47:27

标签： xslt loops count

提前道歉 - 这里总是新手，并且在阅读了几乎每个XSLT线程后都在苦苦挣扎。所以我迫切需要几种阿司匹林和你的指导!!

我有三个传入的参数/变量需要使用xslt 1.0版进行处理。 

<!-- Variables in the XSL -->
<xsl:variable name="tw">125</xsl:variable>
<xsl:variable name="rows">4</xsl:variable>
<xsl:variable name="cols">6</xsl:variable>

我希望最终得到HTML的“背景位置”中的计算值（像素），如下所示： - 

<div style="background-position:-0px -0px;"><img src="images/thumbs/1.jpg" alt="one" /></div>
<div style="background-position:-125px -0px;"><img src="images/thumbs/2.jpg" alt="two" /></div>
<div style="background-position:-250px -0px;"><img src="images/thumbs/3.jpg" alt="three" /></div>
<div style="background-position:-375px -0px;"><img src="images/thumbs/4.jpg" alt="four" /></div>
<div style="background-position:-500px -0px;"><img src="images/thumbs/5.jpg" alt="five" /></div>
<div style="background-position:-625px -0px;"><img src="images/thumbs/6.jpg" alt="six" /></div>

<div style="background-position:-0px -125px;"><img src="images/thumbs/7.jpg" alt="seven" /></div>
<div style="background-position:-125px -125px;"><img src="images/thumbs/8.jpg" alt="eight" /></div>
<div style="background-position:-250px -125px;"><img src="images/thumbs/9.jpg" alt="nine" /></div>
<div style="background-position:-375px -125px;"><img src="images/thumbs/10.jpg" alt="ten" /></div>
<div style="background-position:-500px -125px;"><img src="images/thumbs/11.jpg" alt="11" /></div>
<div style="background-position:-625px -125px;"><img src="MIB/images/thumbs/12.jpg" alt="12" /></div>

<div style="background-position:-0px -250px;"><img src="images/thumbs/13.jpg" alt="13" /></div>
<div style="background-position:-125px -250px;"><img src="/mages/thumbs/14.jpg" alt="14" /></div>
<div style="background-position:-250px -250px;"><img src="images/thumbs/15.jpg" alt="15" /></div>
<div style="background-position:-375px -250px;"><img src="images/thumbs/16.jpg" alt="16" /></div>
<div style="background-position:-500px -250px;"><img src="images/thumbs/17.jpg" alt="17" /></div>
<div style="background-position:-625px -250px;"><img src="images/thumbs/18.jpg" alt="18" /></div>

<div style="background-position:-0px -375px;"><img src="images/thumbs/19.jpg" alt="19" /></div>
<div style="background-position:-125px -375px;"><img src="images/thumbs/20.jpg" alt="20" /></div>
<div style="background-position:-250px -375px;"><img src="images/thumbs/21.jpg" alt="21" /></div>
<div style="background-position:-375px -375px;"><img src="images/thumbs/22.jpg" alt="22" /></div>
<div style="background-position:-500px -375px;"><img src="images/thumbs/23.jpg" alt="23" /></div>
<div style="background-position:-625px -375px;"><img src="images/thumbs/24.jpg" alt="24" /></div>

我意识到我需要循环（以某种方式）并保持计数（以某种方式）并且已经看到了许多循环和计数示例我希望该过程是直接的，但后来我读到了position()和{{1还有很多其他东西让我头脑旋转。我不知道在number语句中如何或在何处定位计数循环，或者即使for-each是最佳解决方案。我的虚弱尝试都没有产生格式良好的XSL，所以你可以看到我没有快速到达。

所以这里希望其中一位大师可以帮助我开始这个过程并帮助我理解xslt。

图像数据来自XML文件，我能够毫无问题地处理img src和alt，所以它只是像素计算，循环，计数等问题

for-each

所以澄清：

计算。有3个变量会产生6个计算值。总重量= 125。宽度用于背景位置，因此根据行/列，计算值如示例所示 - 例如tw-tw，tw，tw * 2，tw * 3，tw * 4和tw * 5（共6次计算）。行数和列数使用计算出的像素值确定每个缩略图的定位方式和位置 - 在上述情况下，这些像素值分别为0px，-125px，-250px，-375px，-500px和-675px。

进一步扩展计算： - 行和列位置由缩略图图像的宽度决定。每个缩略图的位置由行数和列数确定。具有150px宽拇指的3行乘3列网格将需要9个缩略图，因此需要9组px值，但是仅需要2个唯一计算，例如， tw * 2和tw * 3如下所示： - 

<xsl:for-each select="DATASET/ITEM">
<div style="background-position:-{rowpos}px -{colpos}px;"><img src="{thumbnailimage}" alt="{imagealttext}" /></div>
</xsl:for-each>
<!-- rowpos and colpos are the calculated values that are generated from whatever loop and count process is used -->

XML文件图像src和alt文本来自XML文件： - 

<div style="background-position: -0px -0px;" /><img src="image 1.jpg" alt="Alt text 1" /></div>
<div style="background-position: -125px -0px;" /><img src="image 2.jpg" alt="Alt text 2" /></div>
<div style="background-position: -250px -0px;" /><img src="image 3.jpg" alt="Alt text 3" /></div>
<div style="background-position: -375px -0px;" /><img src="image 4.jpg" alt="Alt text 4" /></div>
<div style="background-position: -500px -0px;" /><img src="image 5.jpg" alt="Alt text 5" /></div>
<div style="background-position: -0px -125px;" /><img src="image 6.jpg" alt="Alt text 6" /></div>
<div style="background-position: -125px -125px;" /><img src="image 7.jpg" alt="Alt text 7" /></div>
<div style="background-position: -250px -125px;" /><img src="image 8.jpg" alt="Alt text 8" /></div>
<div style="background-position: -375px -125px;" /><img src="image 9.jpg" alt="Alt text 9" /></div>
<div style="background-position: -500px -125px;" /><img src="image 10.jpg" alt="Alt text 10" /></div>
<div style="background-position: -0px -250px;" /><img src="image 11.jpg" alt="Alt text 11" /></div>
<div style="background-position: -125px -250px;" /><img src="image 12.jpg" alt="Alt text 12" /></div>
<div style="background-position: -250px -250px;" /><img src="image 13.jpg" alt="Alt text 13" /></div>
<div style="background-position: -375px -250px;" /><img src="image 14.jpg" alt="Alt text 14" /></div>
<div style="background-position: -500px -250px;" /><img src="image 15.jpg" alt="Alt text 15" /></div>
<div style="background-position: -0px -375px;" /><img src="image 16.jpg" alt="Alt text 16" /></div>
<div style="background-position: -125px -375px;" /><img src="image 17.jpg" alt="Alt text 17" /></div>
<div style="background-position: -250px -375px;" /><img src="image 18.jpg" alt="Alt text 18" /></div>
<div style="background-position: -375px -375px;" /><img src="image 19.jpg" alt="Alt text 19" /></div>
<div style="background-position: -500px -375px;" /><img src="image 20.jpg" alt="Alt text 20" /></div>

3 个答案:

答案 0 :(得分：3)

我认为这可以使用下面的代码（ XSLT 1.0 ）来实现。 以下转换应该与任何XML文件一起使用。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xsl:output indent="yes" />

<xsl:variable name="TW">125</xsl:variable>
<xsl:variable name="ROWS">4</xsl:variable>
<xsl:variable name="COLS">6</xsl:variable>
<xsl:variable name="TOTAL"><xsl:value-of select="$ROWS * $COLS"/></xsl:variable>

<xsl:template match="/">
    <xsl:call-template name="iterate_rows" />
</xsl:template>

<xsl:template name="iterate_rows">
    <xsl:param name="num">0</xsl:param> 

    <xsl:if test="not($num = $ROWS)">
        <xsl:call-template name="iterate_cols">
            <xsl:with-param name="rows" select="$num"/>
        </xsl:call-template>

        <xsl:call-template name="iterate_rows">
            <xsl:with-param name="num" select="$num + 1"/>
        </xsl:call-template>
    </xsl:if>
</xsl:template>

<xsl:template name="iterate_cols">
    <xsl:param name="num">0</xsl:param> 
    <xsl:param name="rows" />

    <xsl:if test="not($num = $COLS)">
        <xsl:element name="div">
            <xsl:attribute name="style" ><xsl:value-of select="concat('background-position:-', $TW*$num, 'px -', $TW*$rows, 'px;')" /></xsl:attribute>

            <xsl:variable name="number" select="$rows*$COLS + $num + 1" />

            <xsl:element name="img">
                <xsl:attribute name="src">
                    <xsl:value-of select="concat('images/thumbs/', $number, '.jpg')"/>
                </xsl:attribute>
                <xsl:attribute name="alt">
                    <xsl:value-of select="$number"/>
                </xsl:attribute>
            </xsl:element>

        </xsl:element>

        <xsl:call-template name="iterate_cols">
            <xsl:with-param name="num" select="$num + 1"/>
            <xsl:with-param name="rows" select="$rows" />
        </xsl:call-template>
    </xsl:if>
</xsl:template>

</xsl:stylesheet>

修改

在XSLT中，不可能构造类似于C ++或Java的循环，因为不可能改变变量的值（因此不可能有一个计数器）。但是可以用重复替换迭代。

在我的解决方案中，我定义了两个反复调用的模板 - 第一个名为iterate_rows，第二个名称为iterate_cols。整个“计划”的切入点是：

<xsl:template match="/">
    <xsl:call-template name="iterate_rows" />
</xsl:template>

首先调用它。命名模板iterate_rows有一个参数num，它的默认值设置为0.重要的是<xsl:if ...>条件检查我们是否已经到达循环的末尾（在这种情况下，它将是$ROWS）的值。 在条件块内部，我们有两个调用：一个执行iterate_cols模板，第二个调用iterate_rows模板本身（注意：我们用递增的参数num调用它）。第二个模板以类似的方式工作。希望这会有所帮助。

答案 1 :(得分：1)

在XSLT 2.0中，这很简单：它类似于：

<xsl:for-each select="1 to $rows">
  <xsl:variable name="row" select="position()"/>
  <xsl:for-each select="1 to $columns">
     <xsl:variable name="column" select="position()"/>
     <div style="background-position: -{$row*$tw}px -{$column*$tw}px"/>
  </
</

在1.0中，您没有select="1 to $rows"的奢侈品，但一个流行的解决方法是使用select="(//*)[position() &lt;= $rows]"，如果源文档中至少有$ rows元素，则可以使用{{1}}。您实际上并不感兴趣的是被选中的节点，只有它们中有多少节点，这决定了您执行循环的次数。

答案 2 :(得分：0)

这是一个完整的，更短更简单的（只有一个递归模板），递归，XSLT 1.0转换：

<xsl:stylesheet version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
     <xsl:output omit-xml-declaration="yes" indent="yes"/>

     <xsl:param name="pTw" select="125"/>
     <xsl:param name="pNumRows" select="4"/>
     <xsl:param name="pNumCols" select="5"/>

     <xsl:variable name="vImageItems" select="/*/*"/>

     <xsl:template match="/">
      <xsl:call-template name="generateDiv"/>
     </xsl:template>

     <xsl:template name="generateDiv">
      <xsl:param name="pRow" select="1"/>
      <xsl:param name="pCol" select="1"/>

      <xsl:if test="not($pRow > $pNumRows)">
        <xsl:variable name="vImageItem" select=
        "$vImageItems[($pRow -1)*$pNumCols + $pCol]"/>

        <div style="background-position: -{($pCol -1)*$pTw}px -{($pRow -1)*$pTw}px;">
          <img src="{$vImageItem/THUMBNAILIMAGE}"
               alt="{$vImageItem/IMAGEALTTEXT}" />
        </div>

        <xsl:variable name="vnewCol">
         <xsl:choose>
          <xsl:when test="$pCol = $pNumCols">1</xsl:when>
          <xsl:otherwise><xsl:value-of select="$pCol+1"/></xsl:otherwise>
         </xsl:choose>
        </xsl:variable>

        <xsl:variable name="vnewRow">
          <xsl:choose>
            <xsl:when test="$vnewCol = 1"><xsl:value-of select="$pRow+1"/></xsl:when>
            <xsl:otherwise><xsl:value-of select="$pRow"/></xsl:otherwise>
          </xsl:choose>
        </xsl:variable>

        <xsl:call-template name="generateDiv">
         <xsl:with-param name="pRow" select="$vnewRow"/>
         <xsl:with-param name="pCol" select="$vnewCol"/>
        </xsl:call-template>
      </xsl:if>
     </xsl:template>
</xsl:stylesheet>

将此转换应用于提供的XML文档：

<DATASET>
    <ITEM>
        <THUMBNAILIMAGE>image1.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 1</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image2.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 2</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image3.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 3</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image4.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 4</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image5.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 5</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image6.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 6</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image7.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 7</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image8.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 8</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image9.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 9</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image10.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 10</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image11.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 11</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image12.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 12</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image13.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 13</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image14.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 14</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image15.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 15</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image16.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 16</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image17.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 17</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image18.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 18</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image19.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 19</IMAGEALTTEXT>
    </ITEM>
    <ITEM>
        <THUMBNAILIMAGE>image20.jpg</THUMBNAILIMAGE>
        <IMAGEALTTEXT>Alt text 20</IMAGEALTTEXT>
    </ITEM>
</DATASET>

产生了想要的正确结果： 

<div style="background-position: -0px -0px;">
   <img src="image1.jpg" alt="Alt text 1"/>
</div>
<div style="background-position: -125px -0px;">
   <img src="image2.jpg" alt="Alt text 2"/>
</div>
<div style="background-position: -250px -0px;">
   <img src="image3.jpg" alt="Alt text 3"/>
</div>
<div style="background-position: -375px -0px;">
   <img src="image4.jpg" alt="Alt text 4"/>
</div>
<div style="background-position: -500px -0px;">
   <img src="image5.jpg" alt="Alt text 5"/>
</div>
<div style="background-position: -0px -125px;">
   <img src="image6.jpg" alt="Alt text 6"/>
</div>
<div style="background-position: -125px -125px;">
   <img src="image7.jpg" alt="Alt text 7"/>
</div>
<div style="background-position: -250px -125px;">
   <img src="image8.jpg" alt="Alt text 8"/>
</div>
<div style="background-position: -375px -125px;">
   <img src="image9.jpg" alt="Alt text 9"/>
</div>
<div style="background-position: -500px -125px;">
   <img src="image10.jpg" alt="Alt text 10"/>
</div>
<div style="background-position: -0px -250px;">
   <img src="image11.jpg" alt="Alt text 11"/>
</div>
<div style="background-position: -125px -250px;">
   <img src="image12.jpg" alt="Alt text 12"/>
</div>
<div style="background-position: -250px -250px;">
   <img src="image13.jpg" alt="Alt text 13"/>
</div>
<div style="background-position: -375px -250px;">
   <img src="image14.jpg" alt="Alt text 14"/>
</div>
<div style="background-position: -500px -250px;">
   <img src="image15.jpg" alt="Alt text 15"/>
</div>
<div style="background-position: -0px -375px;">
   <img src="image16.jpg" alt="Alt text 16"/>
</div>
<div style="background-position: -125px -375px;">
   <img src="image17.jpg" alt="Alt text 17"/>
</div>
<div style="background-position: -250px -375px;">
   <img src="image18.jpg" alt="Alt text 18"/>
</div>
<div style="background-position: -375px -375px;">
   <img src="image19.jpg" alt="Alt text 19"/>
</div>
<div style="background-position: -500px -375px;">
   <img src="image20.jpg" alt="Alt text 20"/>
</div>

<强>解释：

  1. 这是一种递归解决方案。如果保证迭代次数不超过可用节点的总数（在源XML文档中，则可以使用非递归解决方案（也称为 Piez method ） ）和XSLT样式表）。

  2. 停止条件：当前行号值变得大于参数指定的行数（$pRow > $pNumRows）。

  3. 操作：生成必要的新div元素，然后获取用于执行下一个操作的column-number和row-number的值。

相关问题
最新问题