jquery - XSLT 两列无序列表

Question

我需要有关 xsl 转换的帮助。我有 xml 被 SharePoint Server 控件吐出，如下所示:

<rows>
    <row>A</row>
    <row>B</row>
    <row>C</row>
    <row>D</row>
    <row>E</row>
    <row>F</row>
    <row>G</row>
    <row>H</row>
</rows>

我需要将上面的 xml 转换成下面的格式:

  <==  A-----------B  ==> An li sliding back and forth with the help of a slider plugin
       C-----------D
       E-----------F
       G-----------H

像这样:
_{(来源:imagesup.net)}

需要以下格式的 HTML，因为这是 slider 插件要求呈现 html 以使其工作的方式:

<div class="content-carousel">
<!-- start Basic Jquery Slider -->
        <ul class="bjqs">
          <li>
              <div class="content-left">
               <h4>A</h4>
               </div>
              <div class="content-right">
               <h4>B</h4>
               </div>
          </li>
        <li>
              <div class="content-left">
               <h4>C</h4>
               </div>
              <div class="content-right">
               <h4>D</h4>
               </div>
          </li>
          .
          .
        </ul>
</div>

这是实际的原始 XML:https://gist.github.com/4380967

这是 bjqs slider 插件要求:
_{(来源:imagesup.net)}

我目前有什么:我能够获得两列布局，但这样做涉及表格行，这会发出不必要的标记，这对 slider 插件不利。因此对于每一行，以下内容适用:

 <xsl:if test="$CurPos = 1 ">
    <xsl:text disable-output-escaping="yes">&lt;div&gt;&lt;table&gt;</xsl:text>
  </xsl:if>
  <xsl:if test="$CurPos mod 2 = 1">
    <xsl:text disable-output-escaping="yes">&lt;tr&gt;</xsl:text>
  </xsl:if> 
 
<li>
  <td width="50%" valign="top">
    <table width="90%">
      <tr height="35px" min-height="35px" valign="top">
        <td>
          <span>
            <xsl:if test="string-length($SafeImageUrl) != 0">
              <div class="image-area-left">
                <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
                  <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
                </a>
              </div>
            </xsl:if>
            
            <H3>
                <a href="{$SafeLinkUrl}"> <xsl:value-of select="@Title"/> </a>
            </H3>
            <div class="newsgist"><xsl:value-of select="substring(@Comments,0,200)"/>
                <xsl:if test="string-length(@Comments) &gt; 200">…</xsl:if>         <a href="{$SafeLinkUrl}"> Details…</a>  
            </div>
          </span> 
        </td>
      </tr>
 
    </table>
  </td></li>
 
  <xsl:if test="$CurPos mod 2 = 0">
    <xsl:text disable-output-escaping="yes">&lt;/tr&gt;</xsl:text>
  </xsl:if>
  <xsl:if test="$CurPos = $LastRow ">
    <xsl:text disable-output-escaping="yes">&lt;/table&gt;&lt;/div&gt;</xsl:text>

Answer 1

使用:

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

 <xsl:template match="/*">
     <div class="content-carousel">
     <ul class="bjqs">
      <xsl:apply-templates select="*[position() mod 2 =1]"/>
     </ul>
   </div>
 </xsl:template>

 <xsl:template match="row">
   <li>
     <div class="content-left">
        <h4><xsl:value-of select="."/></h4>
     </div>
       <div class="content-right">
         <h4><xsl:value-of select="following-sibling::*[1]"/></h4>
       </div>
  </li>
 </xsl:template>
</xsl:stylesheet>

当此转换应用于提供的 XML 文档时:

<rows>
    <row>A</row>
    <row>B</row>
    <row>C</row>
    <row>D</row>
    <row>E</row>
    <row>F</row>
    <row>G</row>
    <row>H</row>
</rows>

产生了想要的、正确的结果:

<div class="content-carousel">
   <ul class="bjqs">
      <li>
         <div class="content-left">
            <h4>A</h4>
         </div>
         <div class="content-right">
            <h4>B</h4>
         </div>
      </li>
      <li>
         <div class="content-left">
            <h4>C</h4>
         </div>
         <div class="content-right">
            <h4>D</h4>
         </div>
      </li>
      <li>
         <div class="content-left">
            <h4>E</h4>
         </div>
         <div class="content-right">
            <h4>F</h4>
         </div>
      </li>
      <li>
         <div class="content-left">
            <h4>G</h4>
         </div>
         <div class="content-right">
            <h4>H</h4>
         </div>
      </li>
   </ul>
</div>