使用XSLT通过一组img标记设置一个jsor库

Question

我有这样一个XML文档:

<?xml version='1.0' encoding='UTF-8'?>
<content>
    <text>
        <img src='path/01.jpg'/>
        <img src='path/02.jpg'/>
        <img src='path/03.jpg'/>
    </text>
</content>

我想在jsor画廊需要的HTML结构中转换它。这就是我要的:

<div class='gallery'>
    <div data-u='loading' class='loading'>
        <div></div>
        <div></div>
    </div>
    <div data-u='slides' class='slides'>
        <!-- each img tag will be transformed in to this. The rest of the html is just a fixed structure -->
        <div>
            <img data-u='image' src='path/01.jpg' />
            <img data-u='thumb' src='path/01.jpg' />
        </div>
        <div>
            <img data-u='image' src='path/02.jpg' />
            <img data-u='thumb' src='path/02.jpg' />
        </div>
        <div>
            <img data-u='image' src='path/03.jpg' />
            <img data-u='thumb' src='path/03.jpg' />
        </div>
    </div>
    <span data-u='arrowleft' class='arrowleft'></span>
    <span data-u='arrowright' class='arrowright'></span>
    <div data-u='thumbnavigator' class='thumbnavigator'>
        <div data-u='slides' class='slides'>
            <div data-u='prototype' class='p'>
                <div class='w'>
                    <div data-u='thumbnailtemplate' class='t'></div>
                </div>
                <div class='c'></div>
            </div>
        </div>
    </div>
</div>

这就是我在XSLT中所做的:

<xsl:transform version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:tpl='http://www.weblight.com.br/2015/XSL/Template'>
    <xsl:template match="node()|@*">
        <xsl:copy>
            <xsl:apply-templates select="node()|@*"/>
        </xsl:copy>
    </xsl:template>
    <xsl:template match="content">
        <div class='jssor_component galeria'>
            <div data-u='loading' class='loading'>
                <div><xsl:comment> </xsl:comment></div>
                <div><xsl:comment> </xsl:comment></div>
            </div>
            <div data-u='slides' class='slides'>
                <xsl:for-each select='text/img'>
                    <div>
                        <img data-u='image' src='{@src}'/>
                        <img data-u='thumb' src='{@src}'/>
                    </div>
                </xsl:for-each>
            </div>
            <span data-u='arrowleft' class='arrowleft'><xsl:comment> </xsl:comment></span>
            <span data-u='arrowright' class='arrowright'><xsl:comment> </xsl:comment></span>
            <div data-u='thumbnavigator' class='thumbnavigator'>
                <div data-u='slides' class='slides'>
                    <div data-u='prototype' class='p'>
                        <div class='w'>
                            <div data-u='thumbnailtemplate' class='t'></div>
                        </div>
                        <div class='c'><xsl:comment> </xsl:comment></div>
                    </div>
                </div>
            </div>
        </div>
    </xsl:template>
</xsl:transform>

但这就是我得到的

<div class="jssor_component galeria">
    <div data-u="loading" class="loading">
        <div></div>
        <div></div>
    </div>
    <div data-u="slides" class="slides"></div>
    <span data-u="arrowleft" class="arrowleft"></span>
    <span data-u="arrowright" class="arrowright"></span>
    <div data-u="thumbnavigator" class="thumbnavigator">
        <div data-u="slides" class="slides">
            <div data-u="prototype" class="p">
                <div class="w">
                    <div data-u="thumbnailtemplate" class="t" />
                </div>
                <div class="c"></div>
            </div>
        </div>
    </div>
</div>

在我看来像for-each不像在思想中工作，因为幻灯片div是空的:/

Answer 1

添加

后

<xsl:output method="xml" indent="yes"/>

作为XSLT中xsl:transform元素的子元素，以便输出XML是可读的，我确实得到了以下输出XML

<?xml version="1.0" encoding="UTF-8"?>
<div xmlns:tpl="http://www.weblight.com.br/2015/XSL/Template"
     class="jssor_component galeria">
   <div data-u="loading" class="loading">
      <div><!----></div>
      <div><!----></div>
   </div>
   <div data-u="slides" class="slides">
      <div>
         <img data-u="image" src="path/01.jpg"/>
         <img data-u="thumb" src="path/01.jpg"/>
      </div>
      <div>
         <img data-u="image" src="path/02.jpg"/>
         <img data-u="thumb" src="path/02.jpg"/>
      </div>
      <div>
         <img data-u="image" src="path/03.jpg"/>
         <img data-u="thumb" src="path/03.jpg"/>
      </div>
   </div>
   <span data-u="arrowleft" class="arrowleft"><!----></span>
   <span data-u="arrowright" class="arrowright"><!----></span>
   <div data-u="thumbnavigator" class="thumbnavigator">
      <div data-u="slides" class="slides">
         <div data-u="prototype" class="p">
            <div class="w">
               <div data-u="thumbnailtemplate" class="t"/>
            </div>
            <div class="c"><!----></div>
         </div>
      </div>
   </div>
</div>

看起来很像你所期望的。

我认为(从分析上或经验上)您无法获得包含空data-u="slides" div的XML输出，如您所示:

      <div data-u="slides" class="slides"></div>

Answer 2

当然

<xsl:for-each select='text/img'>

应该

<xsl:for-each select='div/img'>