XSL：生成的DOM似乎很奇怪

Question

我遇到了xsl cheatsheet的问题。生成的DOM似乎顺序错误。这是我的xsl：

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:param name="site-path" select="site-path" />
<xsl:param name="target" select="target" />
<xsl:param name="page-id" select="page-id" />
<xsl:variable name="portlet-id" select="portlet/portlet-id" />

<xsl:template match="portlet">
    <xsl:variable name="device_class">
    <xsl:choose>
        <xsl:when test="string(display-on-small-device)='0'">hidden-xs</xsl:when>
    <xsl:when test="string(display-on-normal-device)='0'">hidden-sm</xsl:when>
    <xsl:when test="string(display-on-large-device)='0'">hidden-md</xsl:when>
    <xsl:when test="string(display-on-xlarge-device)='0'">hidden-lg</xsl:when>
        <xsl:otherwise></xsl:otherwise>
    </xsl:choose>
    </xsl:variable>

    <div class="portlet {$device_class}">
        <xsl:if test="not(string(display-portlet-title)='1')">
            <h3 id="article_{$portlet-id}" class="heading"><xsl:value-of disable-output-escaping="yes" select="portlet-name" /></h3>
        </xsl:if>
        <ul class="news-list gallery news-cards">
        <xsl:apply-templates select="document-list-portlet/document" />
        <xsl:text disable-output-escaping="yes">
            <![CDATA[<div class="clearfix">&#160;</div>]]>
        </xsl:text>
        </ul>
    </div>
</xsl:template>

<xsl:template match="document">
    <xsl:if test="not(string(document-xml-content)='null')">
        <xsl:variable name="vignette-id" select="document-xml-content/article/article-vignette/file-resource/resource-document-id" />
        <xsl:variable name="attribute-id" select="document-xml-content/article/article-vignette/file-resource/resource-attribute-id" />
        <li class="news-list-card-item">
            <a href="{$site-path}?document_id={document-id}&#38;portlet_id={$portlet-id}" class="news-card">
                <div style="background-image: url(document?id={$vignette-id}&amp;id_attribute={$attribute-id}&amp;working_content=true)" class="news-card-image" />
                <div class="news-card-wrapper"> 
                    <div class="news-card-content">
                        <div class="news-card-category">
                            <span>Catégorie</span>
                        </div>
                        <div class="news-card-title">
                            <xsl:value-of select="document-xml-content/article/document-title" /> 
                        </div>
                    </div>
                </div>
            </a>
            <xsl:if test="(string(resource-is-votable)='1')">
                <br />
                <xsl:variable name="resource-score" select="resource-score" />
                <img src="images/local/skin/plugins/rating/stars_{$resource-score}.png" alt="Score" title="Score" />
            </xsl:if>   
            <xsl:if test="(string(is-download-stat)='1')">
                <br />
                #i18n{rating.resource_vote.labelDownloadCount} : <xsl:value-of select="resource-download-stat" />
            </xsl:if>
        </li>
    </xsl:if>
</xsl:template> 

渲染后，生成的DOM为：

<li class="news-list-card-item">
       <a class="news-card" href="jsp/site/Portal.jsp?document_id=35&amp;portlet_id=100">
       </a>
       <div class="news-card-image" style="background-image: url(document?id=35&amp;id_attribute=64&amp;working_content=true)">
          <a class="news-card" href="jsp/site/Portal.jsp?document_id=35&amp;portlet_id=100">
             <div class="news-card-wrapper">
                <div class="news-card-content">
                   <div class="news-card-category">
                      <span>Catégorie</span>
                   </div>
                   <div class="news-card-title">Artu avec vignette 2</div>
                </div>
             </div>
          </a>
       </div>
    </li>

这是预期的HTML：

<li class="news-list-card-item">
    <a href="#" class="news-card">
        <div class="news-card-wrapper">
            <div style="background-image: url(../../modules/news-card/image.jpg)" class="news-card-image"></div>
            <div class="news-card-content">
                <div class="news-card-category"><span>Mobilité</span>
                </div>
                <div class="news-card-title">Découvrez les neuf Autolib' customisées qui vont sillonner Paris</div>
            </div>
        </div>
    </a>
</li>

差异是： 在预期中，你得到了：

li > a > div >div > div ...

在生成中你得到了：

li > a
     div > a > div > div > div 

HEre是一个较小的可再现的例子：

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="portlet">
        <div class="portlet">
            <ul class="news-list gallery news-cards">
            <xsl:apply-templates select="document-list-portlet/document" />
            </ul>
        </div>
    </xsl:template>

    <xsl:template match="document">
            <li class="news-list-card-item">
                <a class="news-card">
                    <div style="background-image: url(hello_world.png)" class="news-card-image" />
                    <div class="news-card-wrapper"> 
                        <div class="news-card-content">
                            <div class="news-card-category">
                                <span>Catégorie</span>
                            </div>
                            <div class="news-card-title">
                                Title
                            </div>
                        </div>
                    </div>
                </a>
            </li>
    </xsl:template> 
</xsl:stylesheet>

以下是用于生成我的DOM的示例数据：

    <?xml version="1.0" encoding="UTF-8"?>
<portlet>
   <portlet-name>Actualités projet</portlet-name>
   <portlet-id>100</portlet-id>
   <page-id>1</page-id>
   <plugin-name>document</plugin-name>
   <display-portlet-title>0</display-portlet-title>
   <display-on-small-device>1</display-on-small-device>
   <display-on-normal-device>1</display-on-normal-device>
   <display-on-large-device>1</display-on-large-device>
   <display-on-xlarge-device>1</display-on-xlarge-device>
   <document-list-portlet>
      <document>
         <document-id>35</document-id>
         <document-date-publication>11/07/2017</document-date-publication>
         <document-xml-content>
            <article>
               <document-id>35</document-id>
               <document-title>Artu avec vignette 2</document-title>
               <document-summary>Artu avec vignette 2</document-summary>
               <document-date-begin>11/07/2017</document-date-begin>
               <document-date-end>
                  <document-categories>
                     <article-url>http://</article-url>
                     <article-attachment>
                        <article-vignette>
                           <file-resource>
                              <resource-document-id>35</resource-document-id>
                              <resource-attribute-id>64</resource-attribute-id>
                              <resource-content-type>image/jpeg</resource-content-type>
                           </file-resource>
                           <file-size>134783</file-size>
                        </article-vignette>
                        <article-body>&amp;lt;p&amp;gt;Artu avec vignette 2&amp;lt;/p&amp;gt;</article-body>
                     </article-attachment>
                  </document-categories>
               </document-date-end>
            </article>
         </document-xml-content>
      </document>
   </document-list-portlet>
</portlet>

我正在使用Google Chrome 59。 我从2天开始搜索问题，目前我已经输了。你能救我吗？

THX，

SLED

Answer 1

我刚刚在我的background-image div中添加 解决了我的问题：

<div class="news-card-wrapper"> 
                    <div style="background-image: url(document?id={$vignette-id}&amp;id_attribute={$attribute-id}&amp;working_content=true)" class="news-card-image" >&#160;</div>
                    <div class="news-card-content">
                        <div class="news-card-category">
                            <span>Catégorie</span>
                        </div>
                        <div class="news-card-title">
                            <xsl:value-of select="document-xml-content/article/document-title" /> 
                        </div>
                    </div>
                </div>

感谢您的所有答案和@MartinHonnen解释。