使用子位置在 XSLT 中创建网格

我正在尝试创建一个如下指定的网格：

<Node>
  <UI>Grid</UI>
  <Rows>3</Rows>
  <Cols>3</Cols>
  <Node>stuff</Node>
  <Node>stuff</Node>
  <Node>stuff</Node>
  ...
</Node>

我想使用 Bootstrap，所以我有

<xsl:template match ="Node[UI[contains(., 'Grid')]]">
    <div class ="container-fluid">
        <xsl:apply-templates select="Node" mode="Grid"/>
    </div>

</xsl:template>

进而：

<xsl:template match ="=Node" mode="Grid">
    <div class ="col-lg-???">
        <xsl:apply-templates />
    </div>

</xsl:template>

最后一部分，col-lg-???应该以某种方式使用节点的位置作为网格节点内的子节点来计算所需的标签，以便正确创建网格。最终，一个 网格将有 9 个节点，我想像这样自动对它们进行排序：

只需使用它们在网格节点内的位置即可。我知道我最终还需要考虑在容器内划船，对此也不确定。Cols通常会推断 经过Cols = Children/Rows.

输出应该类似于：

<div class = "container">
  <div class ="row">
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
  </div>
  <div class ="row">
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
  </div>
  <div class ="row">
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
    <div class = "col-lg-4" ></div>
  </div>
</div>

EDIT:

如果只有一行，这似乎可以完成工作：

<div class ="col-lg-{12 div count(../Node)}">
     <xsl:apply-templates />
</div>

但不确定行部分。

EDIT2:

到目前为止我所拥有的：

<xsl:template match ="//Sub/Node">
    <xsl:if test="count(./preceding-sibling::*) mod (count(../Node) div ../../Rows/text()) = 0">
        <div class ="row"></div>
    </xsl:if>
    <div class ="col-lg-{12 div count(../Node)}">
        <xsl:apply-templates />
    </div>
    <xsl:if test="count(./preceding-sibling::*) mod (count(../Node) div ../../Rows/text()) = 1">
        <div class ="rowclose"></div>
    </xsl:if>
</xsl:template>

rowclose 只是用于表示法，当我在上面的 if 语句中打开一个 div 并在第二个语句中关闭它时，它似乎不喜欢它。我会尝试解决这个问题。结果：

<div class="container-fluid">
    <div class="row"></div>
        <div class="col-lg-3"></div>
        <div class="col-lg-3"></div>
    <div class="rowclose"></div>
    <div class="row"></div>
        <div class="col-lg-3"></div>
        <div class="col-lg-3"></div>
    <div class="rowclose"></div>
</div>

我不是 100% 清楚你想要实现什么，但我认为你正在尝试每行创建三个“节点”，将每一行封装在一个div元素。

如果是这样，您应该首先选择Node将成为每行中第一个元素的元素（其中$cols是一个变量，保存一行中的节点数）

<xsl:apply-templates select="Node[position() mod $cols = 1]" mode="row"/>

（这里需要“行”模式，因为您最终会得到两个匹配的模板Node)

或者，如果您想限制行数，如果节点数量超过您需要的数量，您可以这样做（“Position()”是上下文相关的，并且与您刚刚选择的节点相关，不一定是它们在树中的位置）

<xsl:apply-templates select="Node[position() mod $cols = 1][position() &lt;= $rows]" mode="row"/>

然后你就会有一个与此匹配的模板，处于“行”模式

要选择行中的节点，请执行以下操作

<xsl:apply-templates select="self::*|following-sibling::Node[position() &lt; $cols]" mode="cell"/>

然后你会有第二个模板匹配Node对于单元格，您可以在其中输出带有类的 div （其中lg是一个保存表达式的变量，以避免重复重新计算）

试试这个 XSLT

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output omit-xml-declaration="yes" indent="yes" />
   <xsl:variable name="cols" select="/*/Cols" />
   <xsl:variable name="rows" select="/*/Rows" />
   <xsl:variable name="lg" select="12 div number(/*/Cols)" />

   <xsl:template match="/*">
     <div class="container">
        <xsl:apply-templates select="Node[position() mod $cols = 1][position() &lt; $rows]" mode="row"/>
     </div>
   </xsl:template>

   <xsl:template match="Node" mode="row">
     <div class="row">
        <xsl:apply-templates select="self::*|following-sibling::Node[position() &lt;= $cols]" mode="cell"/>
     </div>
   </xsl:template>

   <xsl:template match="Node" mode="cell">
     <div class="col-lg-{$lg}">
        <xsl:apply-templates />
     </div>
   </xsl:template>
</xsl:stylesheet>