Updating (Jun 18 ’13): using this answer to explain algorithms and summarize conclusions.

About jQuery traversing and “layout solution” workarounds.

After @Wilbert comment I adapted the “simplest algorithm”, to avoid the dynamic behaviour of the check .prop(), that changes with .each() iteration, removing the else. After all iteration, a “parent italicizer” resolves. See here or the code below.

$('#myFragment *').each(function(){
   if ($(this).css('font-style')=='italic')
       $(this).css('font-style','normal');
});
$('#myFragment').parent().css('font-style','italic');

Another way to deal with the dynamic behaviour, is checking a static property, by prop('tagName'), that not changes. See here or the code below.

$('#myFragment').parent().css('font-style','italic');
$('#myFragment *').each(function(){
   if ($(this).prop('tagName')=='I')  // not changes with parent
       $(this).css('font-style','normal');
});

It need more tests, and needs a final parsing to change style properties to concrete <i> tags. For apply the algorithm twice, we need some care.

Layout solution

This is not a solution for the present question, but produce some good clues, and is the best (at least the smallest!) solution for the “layout problem”!

The toggleClass() method can be used to swap from a “italicized class” to a “normal-text class”.
See here or the code below.

 $('#myFragment *').each(function(){
     $(this).toggleClass( "original change");
 });

And we can apply this little algorithm twice, and so many times as we want… It is a good solution! But it is not an “rewrite XML algorithm”, the CSS is a key here:

 .original { font-style:normal; } /* use class="original" in your XHTML fragment */
i.original { font-style:italic; }

 .change { font-style:italic; }
i.change{ font-style:normal; }

… So, for an algorithm that transforms <i> tags, the problem is still open…

Concrete solution

A “100% solution, in pure XSLT1” (tested with many cases!) based on an adaptation of @DanielHaley’s. It is an effective <i> tags transform.

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

<xsl:template match="@*|node()"> <!-- copy all -->
    <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
</xsl:template>

<xsl:template match="i"> <!-- remove tag i -->
    <xsl:apply-templates/>
</xsl:template>

<xsl:template match="text()[not(ancestor::i)]"> <!-- inlcude tag i -->
    <i><xsl:copy-of select="."/></i>
</xsl:template>
 </xsl:stylesheet>

Outlining as an “drive by event algorithm” in a copy process:

• remove i tags: copy any thing of “<i> thing </i>” as ” thing “.

• include i tags: copy any text as “<i> text </i>“, when the text is not into a context of italic parents. PS: text is a terminal node of the DOM tree.

Conclusions

“Layout solutions” are good for text editors, but they use some tricks and non-rigorous solutions (no matter about overlaps, performance, etc.). For XML process we need to deal with <i> tags transform… So de natural languages to express the algorithm are XSLT or xQuery.

The algorithm implemented with XSLT is shows the framework necessities:

1. the ancestor (parent, grandparent, etc.) selector, for check if it is or not a “italic context”;

2. the text-node (DOM text()) access;

3. remove and include the i tag.

So, we can see the problems with each framework.

• DOM (the W3C standard framework): the DOMDocument::renameNode(), for item 3, is not yet implemented (see PHP, Javascript, etc.).

• jQuery: doesn’t have a convenient function for item 2, see this answer.

• XSLT: the best for express the algorithm, but not is available in any context like Javascript.

I (or you plase!) will try to express the XSLT algorithm with “pure DOM2” methods. That DOM version will be the “generic algorithm”… Well: if the translation is valid only for DOM3 (using renameNode and other tricks) the conclusion for now, is that “there are NO generic/translatable algorithm”.

XSLT attempt from https://stackoverflow.com/a/17156452/317052 …

I’m not sure if this would cover all cases, but you could do this:

XML Input

<html>
    <!-- original text: -->
    <p id="p1"><i>Several more</i> Homo sapiens <i>fossils were discovered</i>.</p>
    <!-- same text, swapping italics: -->
    <p id="p2">Several more <i>Homo sapiens</i> fossils were discovered.</p>
    <p>Leave me alone!</p>
    <p><b><i>O</i>RIGINAL <big><i>with italics</i> and </big> withOUT</b></p>
</html>

XSLT 1.0

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

    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="*[i]">
        <xsl:copy>
            <xsl:apply-templates select="@*"/>
            <xsl:apply-templates select="node()" mode="swapItal"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="text()" mode="swapItal" priority="1">
        <i><xsl:value-of select="."/></i>
    </xsl:template>

    <xsl:template match="i" mode="swapItal">
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="@*|node()" mode="swapItal">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()" mode="swapItal"/>
        </xsl:copy>
    </xsl:template>

</xsl:stylesheet>

XML Output

<html>
   <!-- original text: -->
   <p id="p1">Several more<i> Homo sapiens </i>fossils were discovered<i>.</i></p>
   <!-- same text, swapping italics: -->
   <p id="p2"><i>Several more </i>Homo sapiens<i> fossils were discovered.</i></p>
   <p>Leave me alone!</p>
   <p><b>O<i>RIGINAL </i><big>with italics<i> and </i></big><i> withOUT</i></b></p>
</html>

Input Rendered

Several more Homo sapiens fossils were discovered.

Several more Homo sapiens fossils were discovered.

Leave me alone!

ORIGINAL with italics and withOUT

Output Rendered

Several more Homo sapiens fossils were discovered.

Several more Homo sapiens fossils were discovered.

Leave me alone!

ORIGINAL with italics and withOUT

I would Simply:

1. Convert all <i> to </i>s
2. Convert all </i> to <i>s
3. add an <i> to the beginning
4. add an </i> to the end

So

 <p id="p1"><i>Several more</i> Homo sapiens <i>fossils were discovered</i>.</p>
 <!-- converts to: -->
 <i><p id="p2">Several more </i>Homo sapiens<i> fossils were discovered.</p></i>