applying a class to the first a element in a list only - XSLT

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Richard Inman 9 posts 29 karma points

Sep 26, 2012 @ 13:13

0

Applying a class to the first <a> element in a list only

Hi folks

I've created a macro to generate a list for an image carousel. Its working fine, but I need to apply the class "selected" to the first <a> element, so we end up with the following mark up:

<ul>
<li><a href="images/making/content/image-01.jpg" title="Yummy cakes" class="selected">1</a></li>
<li><a href="images/making/content/image-02.jpg" title="Jammy Rings">2</a></li>
<li><a href="images/making/content/image-03.jpg" title="Macaroons">3</a></li>
</ul>

I also need to insert the uploadPhoto alias of the first child node into the img src attribute, within the photo div. This is what I've got so far:

<xsl:template match="/">
            <div class="photos">

              <div class="photo"><img src="" alt="Sorbet" /></div>

              <p class="caption"><strong><xsl:number/>. </strong>Sorbet</p>

              <div class="photos-nav clear">

                <div class="clear">
                  <a href="#" class="back">Back</a>
                    
                    <ul>
                    <xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
                      <li>
                        <a href="{uploadPhoto}" title="{@nodeName}"><xsl:number/></a>
                      </li>
                    </xsl:for-each>
                    </ul>
                  <a href="#" class="next">Next</a>

                </div>

              </div>

            </div>
</xsl:template>

I appreciate this is probably quite basic, but I'm very, very new to this. Any help would be greatly appreciated!

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Sep 26, 2012 @ 13:25

Hi Richard,

Try this

<choose>
<when test="position() = 1">
<a href="{uploadPhoto}" title="{@nodeName}" class="selected"><xsl:number/></a>
</when>
<otherwise> 
<a href="{uploadPhoto}" title="{@nodeName}"><xsl:number/></a>
</otherwise>
</choose>

Copy Link

Richard Inman 9 posts 29 karma points

Sep 26, 2012 @ 13:39

0

Fuji, you're a star! That's done the trick! Thank you! :-D

Copy Link

Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib

Sep 26, 2012 @ 21:24

Hi Richard,

You can use a little shortcut for that, so you don't have to duplicate any code - it all adds up, you know :-)

This also shows you how to grab the first childnode's uploadPhoto:

<xsl:template match="/">
    <!-- Grab the documents -->
    <xsl:variable name="photoDocuments" select="$currentPage/*[@isDoc][not(umbracoNaviHide = 1)]" />

    <div class="photos">
        <div class="photo">
            <img src="{$photoDocuments[1]/uploadPhoto}" alt="Sorbet" />
        </div>

        <p class="caption"><strong><xsl:number/>.&nbsp;</strong>Sorbet</p>

        <div class="photos-nav clear">
            <div class="clear">
                <a href="#" class="back">Back</a>

                <ul>
                    <xsl:for-each select="$photoDocuments">
                        <li>
                            <a href="{uploadPhoto}" title="{@nodeName}">
                                <xsl:if test="position() = 1"> <xsl:attribute name="class">selected</xsl:attribute> </xsl:if>
                                <xsl:number/>
                            </a>
                        </li>
                    </xsl:for-each>
                </ul>

                <a href="#" class="next">Next</a>
            </div>
        </div>
    </div>
</xsl:template>

/Chriztian

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Applying a class to the first <a> element in a list only