Attributes: add SVG class manipulation

- Note: support for SVG is limited in jQuery,
  but this is one area where the cost vs benefit ratio
  was acceptable.

Fixes gh-2199
Close gh-2268

diff --git a/src/attributes/classes.js b/src/attributes/classes.js
index f9dba94f7de43d6b6b7256e05e0d17c4741a4cde..d0d1d989f19fc4bf1c09667420288d3fcad84fab 100644 (file)
--- a/src/attributes/classes.js
+++ b/src/attributes/classes.js
@@ -7,16 +7,20 @@ define([
 
 var rclass = /[\t\r\n\f]/g;
 
+function getClass( elem ) {
+       return elem.getAttribute && elem.getAttribute( "class" ) || "";
+}
+
 jQuery.fn.extend({
        addClass: function( value ) {
-               var classes, elem, cur, clazz, j, finalValue,
+               var classes, elem, cur, curValue, clazz, j, finalValue,
                        proceed = typeof value === "string" && value,
                        i = 0,
                        len = this.length;
 
                if ( jQuery.isFunction( value ) ) {
                        return this.each(function( j ) {
-                               jQuery( this ).addClass( value.call( this, j, this.className ) );
+                               jQuery( this ).addClass( value.call( this, j, getClass( this ) ) );
                        });
                }
 
@@ -26,10 +30,9 @@ jQuery.fn.extend({
 
                        for ( ; i < len; i++ ) {
                                elem = this[ i ];
-                               cur = elem.nodeType === 1 && ( elem.className ?
-                                       ( " " + elem.className + " " ).replace( rclass, " " ) :
-                                       " "
-                               );
+                               curValue = getClass( elem );
+                               cur = elem.nodeType === 1 &&
+                                       ( " " + curValue + " " ).replace( rclass, " " );
 
                                if ( cur ) {
                                        j = 0;
@@ -41,8 +44,8 @@ jQuery.fn.extend({
 
                                        // only assign if different to avoid unneeded rendering.
                                        finalValue = jQuery.trim( cur );
-                                       if ( elem.className !== finalValue ) {
-                                               elem.className = finalValue;
+                                       if ( curValue !== finalValue ) {
+                                               elem.setAttribute( "class", finalValue );
                                        }
                                }
                        }
@@ -52,14 +55,14 @@ jQuery.fn.extend({
        },
 
        removeClass: function( value ) {
-               var classes, elem, cur, clazz, j, finalValue,
+               var classes, elem, cur, curValue, clazz, j, finalValue,
                        proceed = arguments.length === 0 || typeof value === "string" && value,
                        i = 0,
                        len = this.length;
 
                if ( jQuery.isFunction( value ) ) {
                        return this.each(function( j ) {
-                               jQuery( this ).removeClass( value.call( this, j, this.className ) );
+                               jQuery( this ).removeClass( value.call( this, j, getClass( this ) ) );
                        });
                }
                if ( proceed ) {
@@ -67,11 +70,11 @@ jQuery.fn.extend({
 
                        for ( ; i < len; i++ ) {
                                elem = this[ i ];
+                               curValue = getClass( elem );
+
                                // This expression is here for better compressibility (see addClass)
-                               cur = elem.nodeType === 1 && ( elem.className ?
-                                       ( " " + elem.className + " " ).replace( rclass, " " ) :
-                                       ""
-                               );
+                               cur = elem.nodeType === 1 &&
+                                       ( " " + curValue + " " ).replace( rclass, " " );
 
                                if ( cur ) {
                                        j = 0;
@@ -84,8 +87,8 @@ jQuery.fn.extend({
 
                                        // Only assign if different to avoid unneeded rendering.
                                        finalValue = value ? jQuery.trim( cur ) : "";
-                                       if ( elem.className !== finalValue ) {
-                                               elem.className = finalValue;
+                                       if ( curValue !== finalValue ) {
+                                               elem.setAttribute( "class", finalValue );
                                        }
                                }
                        }
@@ -104,20 +107,24 @@ jQuery.fn.extend({
                if ( jQuery.isFunction( value ) ) {
                        return this.each(function( i ) {
                                jQuery( this ).toggleClass(
-                                       value.call(this, i, this.className, stateVal), stateVal
+                                       value.call( this, i, getClass( this ), stateVal ),
+                                       stateVal
                                );
                        });
                }
 
                return this.each(function() {
+                       var className, i, self, classNames;
+
                        if ( type === "string" ) {
+
                                // Toggle individual class names
-                               var className,
-                                       i = 0,
-                                       self = jQuery( this ),
-                                       classNames = value.match( rnotwhite ) || [];
+                               i = 0;
+                               self = jQuery( this );
+                               classNames = value.match( rnotwhite ) || [];
+
+                               while ( ( className = classNames[ i++ ] ) ) {
 
-                               while ( (className = classNames[ i++ ]) ) {
                                        // Check each className given, space separated list
                                        if ( self.hasClass( className ) ) {
                                                self.removeClass( className );
@@ -128,18 +135,24 @@ jQuery.fn.extend({
 
                        // Toggle whole class name
                        } else if ( value === undefined || type === "boolean" ) {
-                               if ( this.className ) {
+                               className = getClass( this );
+                               if ( className ) {
+
                                        // store className if set
-                                       dataPriv.set( this, "__className__", this.className );
+                                       dataPriv.set( this, "__className__", className );
                                }
 
                                // If the element has a class name or if we're passed `false`,
                                // then remove the whole classname (if there was one, the above saved it).
                                // Otherwise bring back whatever was previously saved (if anything),
                                // falling back to the empty string if nothing was stored.
-                               this.className = this.className || value === false ?
-                                       "" :
-                                       dataPriv.get( this, "__className__" ) || "";
+                               if ( this.setAttribute ) {
+                                       this.setAttribute( "class",
+                                               className || value === false ?
+                                               "" :
+                                               dataPriv.get( this, "__className__" ) || ""
+                                       );
+                               }
                        }
                });
        },
@@ -150,8 +163,9 @@ jQuery.fn.extend({
                        l = this.length;
                for ( ; i < l; i++ ) {
                        if ( this[i].nodeType === 1 &&
-                               (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
-
+                               ( " " + getClass( this[i] ) + " " ).replace( rclass, " " )
+                                       .indexOf( className ) > -1
+                       ) {
                                return true;
                        }
                }

diff --git a/test/unit/attributes.js b/test/unit/attributes.js
index c1f77371853fbd6729964310b2988a722d8bc0ab..526cfc99dbeb939de883622b152429094cd35188 100644 (file)
--- a/test/unit/attributes.js
+++ b/test/unit/attributes.js
@@ -1478,3 +1478,31 @@ test( "Insignificant white space returned for $(option).val() (#14858)", functio
        val = jQuery( "<option>  test  </option>" ).val();
        equal( val.length, 4, "insignificant white-space returned for value" );
 });
+
+test( "SVG class manipulation (gh-2199)", function() {
+       expect( 12 );
+
+       function createSVGElement( nodeName ) {
+               return document.createElementNS( "http://www.w3.org/2000/svg", nodeName );
+       }
+
+       jQuery.each([
+               "svg",
+               "rect",
+               "g"
+       ], function() {
+               var elem = jQuery( createSVGElement( this ) );
+
+               elem.addClass( "awesome" );
+               ok( elem.hasClass( "awesome" ), "SVG element (" + this + ") has added class" );
+
+               elem.removeClass( "awesome" );
+               ok( !elem.hasClass( "awesome" ), "SVG element (" + this + ") removes the class" );
+
+               elem.toggleClass( "awesome" );
+               ok( elem.hasClass( "awesome" ), "SVG element (" + this + ") toggles the class on" );
+
+               elem.toggleClass( "awesome" );
+               ok( !elem.hasClass( "awesome" ), "SVG element (" + this + ") toggles the class off" );
+       });
+});