XSLT根据位置应用属性

时间:2011-01-06 23:50:37

标签: xslt umbraco

我正在将XSLT用于基于960网格css框架的网站。

我有跨越页面的div列,如果它是行中的第一个div,它应该首先应用一个类,如果它是中间的那么没有类,如果它是行中的第3个它应该让班级最后申请。

我真的很抓我的头,因为这是最好的方式,任何帮助表示赞赏。

下面是我想要结束的结构,div中的数字代表位置。

<div class="container_12">
    <div id="main-content" class="alpha grid_12" style="margin-bottom: 20px;">
        <div class="grid_4 alpha">
            1
        </div>
        <div class="grid_4 ">
            2
        </div>
        <div class="grid_4 omega">
            3
        </div>
        <div class="grid_4 alpha">
            4
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

此转化

<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:my="my:my" exclude-result-prefixes="my">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
 <xsl:strip-space elements="*"/>

 <my:classes>
  <class class="omega"></class>
  <class class="alpha"></class>
  <class/>
 </my:classes>

 <xsl:variable name="vClasses" select=
  "document('')/*/my:classes/*"/>

 <xsl:template match="node()|@*">
  <xsl:copy>
   <xsl:apply-templates select="node()|@*"/>
  </xsl:copy>
 </xsl:template>

 <xsl:template match="div[@id='main-content']/div">
  <xsl:variable name="vPos123" select=
    "1 + (position() mod 3)"/>
  <div class="{@class} {$vClasses[$vPos123]/@class}">

   <xsl:apply-templates select=
   "node()|@*[not(name()='class')]"/>
  </div>
 </xsl:template>
</xsl:stylesheet>

应用于以下XML文档

<div class="container_12">
    <div id="main-content" class="alpha grid_12" style="margin-bottom: 20px;">
        <div class="grid_4">
                     1
        </div>
        <div class="grid_4 ">
                     2
        </div>
        <div class="grid_4">
                     3
        </div>
        <div class="grid_4">
                     4
       </div>
  </div>
</div>

生成想要的正确结果

<div class="container_12">
   <div id="main-content" class="alpha grid_12" style="margin-bottom: 20px;">
      <div class="grid_4 alpha">
                     1
        </div>
      <div class="grid_4  ">
                     2
        </div>
      <div class="grid_4 omega">
                     3
        </div>
      <div class="grid_4 alpha">
                     4
       </div>
   </div>
</div>

<强>解释

  1. 身份规则“按原样”复制每个节点,,除非被覆盖。

  2. 模板会覆盖div[@id='main-content']/div

  3. 类型元素的标识规则
  4. 表达式1 + (position() mod 3)将位置映射到集合{2,3,1}。

  5. 上述表达式用作全局指定的<my:classes>元素子元素的索引,以提取要添加到div的新CSS类元素