Sur*_*ran 0 html xml xslt html-lists
我正在解析 XML 文档并使用它创建 HTML 列表。我遇到过一种情况，我需要从 XML 数据中创建一个多级列表。例如：
1. One
2. Two
2.1. Three
2.2. Four
2.2.1. Five
2.2.2. Six
2.3. Seven
3. Eight
是否可以最好使用 HTML 创建这样的结构<ul>-<li>s？我遇到过一些建议在 CSS 中使用的解决方案counter-incretemnt, counter-reset，但问题是由于 XML 的结构，这种解决方案对于我的情况不可行，而且使用 XSLT 编写它会非常困难。
谁能建议我解决这个问题？
注意：列表的级别没有限制！
提前谢谢！
编辑：为上述所需的 HTML 列表添加示例 XML：
<ele lvl="0">
One
</ele>
<ele lvl="0">
Two
</ele>
<ele lvl="1">
Three
</ele>
<ele lvl="1">
Four
</ele>
<ele lvl="2">
Five
</ele>
<ele lvl="2">
Six
</ele>
<ele lvl="1">
Seven
</ele>
<ele lvl="0">
Eight
<ele>
此 XSLT 样式表将您的列表输出为正确嵌套的 HTML：
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" />
<!-- this key indexes <ele> by their level -->
<xsl:key name="kLevel" match="ele" use="@lvl" />
<xsl:template match="/">
<html>
<head>
<title>Nested List</title>
</head>
<body>
<xsl:call-template name="list">
<xsl:with-param name="elems" select="key('kLevel', '0')" />
</xsl:call-template>
</body>
</html>
</xsl:template>
<!-- this makes a new list from a set of <ele> -->
<xsl:template name="list">
<xsl:param name="elems" />
<ol>
<xsl:apply-templates select="$elems" />
</ol>
</xsl:template>
<!-- this makes a list item and, optionally, a sub-list -->
<xsl:template match="ele">
<xsl:variable name="myLevel" select="@lvl" />
<xsl:variable name="myChildren" select="key('kLevel', $myLevel + 1)[
generate-id(preceding-sibling::ele[@lvl = $myLevel][1])
=
generate-id(current())
]" />
<li>
<span><xsl:value-of select="." /></span>
<xsl:if test="$myChildren">
<xsl:call-template name="list">
<xsl:with-param name="elems" select="$myChildren" />
</xsl:call-template>
</xsl:if>
</li>
</xsl:template>
</xsl:stylesheet>
的含义
key('kLevel', $myLevel + 1)[
generate-id(preceding-sibling::ele[@lvl = $myLevel][1])
=
generate-id(current())
]
是“所有<ele>具有向下一级的级别”（即当前节点的key('kLevel', $myLevel + 1)所有潜在子节点）“其中 具有当前级别的前一个节点的 ID （ ）”<ele>generate-id(preceding-sibling::ele[@lvl = $myLevel][1])，即每个潜在子节点的逻辑父节点）“等于 ID当前节点” ( = generate-id(current()))。
本质上，这会将节点的所有潜在子节点与其所有潜在父节点进行匹配，返回“内部连接”（如果愿意的话）——实际上是当前节点子节点的节点集。
应用于您的输入：
<elems>
<ele lvl="0">One</ele>
<ele lvl="0">Two</ele>
<ele lvl="1">Three</ele>
<ele lvl="1">Four</ele>
<ele lvl="2">Five</ele>
<ele lvl="2">Six</ele>
<ele lvl="1">Seven</ele>
<ele lvl="0">Eight</ele>
</elems>
这返回
<ol>
<li><span>One</span></li>
<li>
<span>Two</span>
<ol>
<li><span>Three</span></li>
<li>
<span>Four</span>
<ol>
<li><span>Five</span></li>
<li><span>Six</span></li>
</ol>
</li>
<li><span>Seven</span></li>
</ol>
</li>
<li><span>Eight</span></li>
</ol>
现在，当您应用CSS 轮廓编号时，
ol {
counter-reset: section;
list-style-type: none;
}
li:before {
counter-increment: section;
content: counters(section, ".") ". ";
}
你得到想要的结果
1. 一个
2. 两个
2.1. 三
2.2. 四
2.2.1. 五
2.2.2. 六
2.3. 七
3. 八
| 归档时间： |
|
| 查看次数： |
2241 次 |
| 最近记录： |