“Nested em tag being repeated when using HTML Ninja Technique” – Forum Thread – Discuss

Nested em tag being repeated when using HTML Ninja Technique

This is an open discussion with 5 replies, filed under XSLT.

Search

You are looking at page 1 of 1

- DavidOliver
- 07 Jun 12, 1:54 am
- Comment #1

I'm trying to use the HTML Ninja Technique, but am finding that a nested em element is being repeated at the end of its parent tag.

My aim is to remove the opening and closing p tag (but not the text it's containing) from the text node:

<data>
    <main-message>
        <section id="6" handle="how2-main-message">HOW2: Main message</section>
        <entry id="10">
            <heading handle="your-visual-guides-to-better-teaching">Your visual guides to better teaching</heading>
            <text mode="formatted"><p>With <em>100+</em> techniques visualised, learning new ways to teach has never been easier, faster or more compelling.</p>
            </text>
        </entry>
    </main-message>
</data>

XSLT:

<xsl:template match="/data" mode="page-heading">
    <hgroup>
        <h1><xsl:value-of select="/data/main-message/entry/heading"/></h1>
        <h2><xsl:apply-templates select="/data/main-message/entry/text//*"/></h2>
    </hgroup>
</xsl:template>

<xsl:template match="/data/main-message/entry/text//*">
    <xsl:element name="{name()}">
        <xsl:apply-templates select="* | text()"/>
    </xsl:element>
</xsl:template>

<xsl:template match="/data/main-message/entry/text//p" priority="1">
    <xsl:apply-templates select="* | text()"/>
</xsl:template>

The output:

<hgroup>
    <h1>Your visual guides to better teaching</h1>
    <h2>With <em>100+</em> techniques visualised, learning new ways to teach has never been easier, faster or more compelling.<em>100+</em></h2>
</hgroup>

The p tag is gone as intended, but why is <em>100+</em> repeated at the end of the h2 tag?

- klaftertief
- 07 Jun 12, 2:36 am
- Comment #2

I guess because you are selecting it with the //* expression in

<xsl:apply-templates select="/data/main-message/entry/text//*"/>

Try to be more specific by using

<xsl:apply-templates select="/data/main-message/entry/text/p/*"/>

when you know that the always is a p, or more general again direct grandchildren

<xsl:apply-templates select="/data/main-message/entry/text/*/*"/>

But why don't you just use

<xsl:copy-of select="/data/main-message/entry/text/*/*"/>

? And I think it's better to add a mode attribute to you ninja templates to avoid unwanted matches.

- DavidOliver
- 07 Jun 12, 2:45 am
- Comment #3

I need to keep the text that is directly inside the original p tag, and p/* selects only the child elements of p (such as em). I've edited my original post to make that clearer.

I think the ninja technique depends on the // to deal with all nested elements, and not just those of a certain depth?

Thanks for the reply.

- DavidOliver
- 07 Jun 12, 2:49 am
- Comment #4

Ah, I understand your comment on changing the apply-templates select parameter value properly now, @klaftertief. Sorted!

I changed:

<h2><xsl:apply-templates select="/data/main-message/entry/text//*"/></h2>

to:

<h2><xsl:apply-templates select="/data/main-message/entry/text/p"/></h2>

Thanks again.

- remie
- 07 Jun 12, 3:54 am
- Comment #5

@DavidOliver: it is best practice to never use // for both performance reasons and the fact that you might match something you don't want to match (like you did in the above example).

- DavidOliver
- 07 Jun 12, 3:59 am
- Comment #6

Thanks. Yes, I usually stay away from //, but I mistakenly thought it was necessary to use it in the apply-templates select parameter value for the ninja technique.

I think I was confusing applying templates to a node with matching nodes via the ninja technique, and that I was applying the ninja technique multiple times. I think...

Create an account or sign in to comment.

Symphony.