1
votes

I need to select all odd position elements and put them in a left floated div and all even elements in right floated div as this:

<rows>
  <row title="A" />
  <row title="B" />
  <row title="C" />
  <row title="D" />
  <row title="E" />
  <row title="F" />
</rows>

==================Transform as===>

A-----B
C-----D
E-----F

I am using the following xsl:

    <div class="content-left" style="width:250px; float:left;"> 
    <span class="NewsHeading">
    <h4><xsl:value-of select="@Title"/></h4>
    </span> 
    </div> 
    <div class="content-right" style="float:right"> 
    <span class="NewsHeading">
    <h4><xsl:value-of select="following-sibling::*[1]/@Title"/></h4>
    </span> 
</div>

But my XSLT produces the following:

A----B
B----C
C----D
D----E
E----F

How to make the second row start from the first row's following-sibling's following sibling??

Sounds kinda weird..basically i just don't want the repetition..

2

2 Answers

1
votes

You probably have a 'xsl:for-each select="rows/row"' element somewhere?

Then just replace it by

<xsl:for-each select="rows/row[position() mod 2 = 1]">

to only apply the template to every second row

1
votes

Here is a complete solution:

<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="@title"/></h4>
     </div>
       <div class="content-right">
         <h4><xsl:value-of select="following-sibling::*[1]/@title"/></h4>
       </div>
  </li>
 </xsl:template>
</xsl:stylesheet>

When this transformation is applied to the provided XML document:

<rows>
  <row title="A" />
  <row title="B" />
  <row title="C" />
  <row title="D" />
  <row title="E" />
  <row title="F" />
</rows>

the wanted, correct result is produced:

<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>
   </ul>
</div>