jquery - XSLT2列の順序付けされていないリスト

Question

xsl変換についてサポートが必要です。以下のように、SharePointServerコントロールによって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>

上記の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を機能させるためにレンダリングするように要求するため、次の形式の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>

これが実際のRAWXMLです：https ：//gist.github.com/4380967

bjqsスライダープラグインの要件は次のとおりです：（ _{ソース：imagesup.net）}

現在の内容：2列のレイアウトを取得できますが、テーブルの行が含まれているため、スライダープラグインに適さない不要なマークアップが生成されます。したがって、各行には、以下が適用されます。

 <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">…&lt;/xsl:if>         <a href="{$SafeLinkUrl}"> Details…&lt;/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>