Attributes: allow array param in add/remove/toggleClass

+30 bytes instead of +182

Thanks to @faisaliyk for the first pass on this feature.

Fixes gh-3532
Close gh-3917

diff --git a/src/attributes/classes.js b/src/attributes/classes.js
index 23b4cd6af4861ef90533f9aa5646e63e5bbb99d9..1c75821b25581c2f8e593537ac4cabd0ac4af162 100644 (file)
--- a/src/attributes/classes.js
+++ b/src/attributes/classes.js
@@ -12,6 +12,16 @@ function getClass( elem ) {
        return elem.getAttribute && elem.getAttribute( "class" ) || "";
 }
 
+function classesToArray( value ) {
+       if ( Array.isArray( value ) ) {
+               return value;
+       }
+       if ( typeof value === "string" ) {
+               return value.match( rnothtmlwhite ) || [];
+       }
+       return [];
+}
+
 jQuery.fn.extend( {
        addClass: function( value ) {
                var classes, elem, cur, curValue, clazz, j, finalValue,
@@ -23,9 +33,9 @@ jQuery.fn.extend( {
                        } );
                }
 
-               if ( typeof value === "string" && value ) {
-                       classes = value.match( rnothtmlwhite ) || [];
+               classes = classesToArray( value );
 
+               if ( classes.length ) {
                        while ( ( elem = this[ i++ ] ) ) {
                                curValue = getClass( elem );
                                cur = elem.nodeType === 1 && ( " " + stripAndCollapse( curValue ) + " " );
@@ -64,9 +74,9 @@ jQuery.fn.extend( {
                        return this.attr( "class", "" );
                }
 
-               if ( typeof value === "string" && value ) {
-                       classes = value.match( rnothtmlwhite ) || [];
+               classes = classesToArray( value );
 
+               if ( classes.length ) {
                        while ( ( elem = this[ i++ ] ) ) {
                                curValue = getClass( elem );
 
@@ -96,9 +106,10 @@ jQuery.fn.extend( {
        },
 
        toggleClass: function( value, stateVal ) {
-               var type = typeof value;
+               var type = typeof value,
+                       isValidValue = type === "string" || Array.isArray( value );
 
-               if ( typeof stateVal === "boolean" && type === "string" ) {
+               if ( typeof stateVal === "boolean" && isValidValue ) {
                        return stateVal ? this.addClass( value ) : this.removeClass( value );
                }
 
@@ -114,12 +125,12 @@ jQuery.fn.extend( {
                return this.each( function() {
                        var className, i, self, classNames;
 
-                       if ( type === "string" ) {
+                       if ( isValidValue ) {
 
                                // Toggle individual class names
                                i = 0;
                                self = jQuery( this );
-                               classNames = value.match( rnothtmlwhite ) || [];
+                               classNames = classesToArray( value );
 
                                while ( ( className = classNames[ i++ ] ) ) {
 

diff --git a/test/unit/attributes.js b/test/unit/attributes.js
index 3ab023eaf71ebeda5a616ac98e9132a029fcd48b..b446fe1c3fb58cc5879ad81aaaedf4ae301fdc0c 100644 (file)
--- a/test/unit/attributes.js
+++ b/test/unit/attributes.js
@@ -12,6 +12,10 @@ function functionReturningObj( value ) {
        };
 }
 
+function arrayFromString( value ) {
+       return value ? value.split( " " ) : [];
+}
+
 /*
        ======== local reference =======
        bareObj and functionReturningObj can be used to test passing functions to setters
@@ -1261,6 +1265,10 @@ QUnit.test( "addClass(Function)", function( assert ) {
        testAddClass( functionReturningObj, assert );
 } );
 
+QUnit.test( "addClass(Array)", function( assert ) {
+       testAddClass( arrayFromString, assert );
+} );
+
 QUnit.test( "addClass(Function) with incoming value", function( assert ) {
        assert.expect( 52 );
        var pass, i,
@@ -1334,6 +1342,10 @@ QUnit.test( "removeClass(Function) - simple", function( assert ) {
        testRemoveClass( functionReturningObj, assert );
 } );
 
+QUnit.test( "removeClass(Array) - simple", function( assert ) {
+       testRemoveClass( arrayFromString, assert );
+} );
+
 QUnit.test( "removeClass(Function) with incoming value", function( assert ) {
        assert.expect( 52 );
 
@@ -1432,6 +1444,10 @@ QUnit.test( "toggleClass(Function[, boolean])", function( assert ) {
        testToggleClass( functionReturningObj, assert );
 } );
 
+QUnit.test( "toggleClass(Array[, boolean])", function( assert ) {
+       testToggleClass( arrayFromString, assert );
+} );
+
 QUnit.test( "toggleClass(Function[, boolean]) with incoming value", function( assert ) {
        assert.expect( 14 );
 
@@ -1567,6 +1583,40 @@ QUnit.test( "addClass, removeClass, hasClass on many elements", function( assert
                "Did not find a class when not present" );
 } );
 
+QUnit.test( "addClass, removeClass, hasClass on many elements - Array", function( assert ) {
+       assert.expect( 16 );
+
+       var elem = jQuery( "<p>p0</p><p>p1</p><p>p2</p>" );
+
+       elem.addClass( [ "hi" ] );
+       assert.equal( elem[ 0 ].className, "hi", "Check single added class" );
+       assert.equal( elem[ 1 ].className, "hi", "Check single added class" );
+       assert.equal( elem[ 2 ].className, "hi", "Check single added class" );
+
+       elem.addClass( [ "foo",  "bar" ] );
+       assert.equal( elem[ 0 ].className, "hi foo bar", "Check more added classes" );
+       assert.equal( elem[ 1 ].className, "hi foo bar", "Check more added classes" );
+       assert.equal( elem[ 2 ].className, "hi foo bar", "Check more added classes" );
+
+       elem.removeClass();
+       assert.equal( elem[ 0 ].className, "", "Remove all classes" );
+       assert.equal( elem[ 1 ].className, "", "Remove all classes" );
+       assert.equal( elem[ 2 ].className, "", "Remove all classes" );
+
+       elem.addClass( [ "hi", "foo", "bar", "baz" ] );
+       elem.removeClass( [ "foo" ] );
+       assert.equal( elem[ 0 ].className, "hi bar baz", "Check removal of one class" );
+       assert.equal( elem[ 1 ].className, "hi bar baz", "Check removal of one class" );
+       assert.equal( elem[ 2 ].className, "hi bar baz", "Check removal of one class" );
+
+       elem.removeClass( [ "bar baz" ] );
+       assert.equal( elem[ 0 ].className, "hi", "Check removal of two classes" );
+       assert.equal( elem[ 1 ].className, "hi", "Check removal of two classes" );
+       assert.equal( elem[ 2 ].className, "hi", "Check removal of two classes" );
+
+       assert.ok( elem.hasClass( "hi" ), "Check has1" );
+} );
+
 QUnit.test( "addClass, removeClass, hasClass on elements with classes with non-HTML whitespace (gh-3072, gh-3003)", function( assert ) {
        assert.expect( 9 );