Skip to content

Instantly share code, notes, and snippets.

@rwaldron

rwaldron/jquery.classes.html

Created July 16, 2010 17:31
Show Gist options
  • Save rwaldron/478660 to your computer and use it in GitHub Desktop.
Save rwaldron/478660 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jquery.classes.html
<!DOCTYPE html>
<html>
<head>
<title>jquery.classes.js</title>
<script src="jquery-1.4.2.js"></script>
<script src="jquery.classes.js"></script>
</head>
<body>
<p class="foo bar baz">classes: foo, bar, baz</p>
<p class="foo">classes: foo</p>
<p class="bar baz">classes: bar, baz</p>
<p class="">classes: none</p>
</body>
</html>
Raw
jquery.classes.js
;(function ($) {
/*
// mdc classes docs: https://developer.mozilla.org/en/DOM/element.classes
var pageText = document.getElementById('pageText');
console.group('#pageText');
console.log(pageText);
console.log('length ' + pageText.classList.length)
console.log('add(str) ' + pageText.classList.add('foo'))
console.log('contains(str) ' + pageText.classList.contains('foo'))
console.log('item(0) ' + pageText.classList.item(0))
console.log('item(1) ' + pageText.classList.item(1))
console.log('remove(str) ' + pageText.classList.remove('foo'))
console.log('toggle(str) ' + pageText.classList.toggle('foo'))
console.groupEnd();
*/
$.fn.classes = function ( method, arg ) {
var _internalFn = {
// Native: Element.classList.length // Number, # of classes on element
length: function (elem) {
return $(elem).attr('class').split(/\s+/).length;
},
// Native: Element.classList.add([str]) // undefined
add: function(elem, value) {
return $(elem).addClass(value);
},
// Native: Element.classList.contains([str]) // bool
contains: function(elem, value) {
return $(elem).hasClass(value);
},
// Native: Element.classList.item([int]) // string, classname at index
item: function(elem, value) {
return ($(elem).attr('class').split(/\s+/)[value]|'');
},
// Native: Element.classList.remove([str]) // undefined
remove: function(elem, value) {
return $(elem).removeClass(value);
},
// Native: Element.classList.add([str]) // undefined
toggle: function(elem, value) {
return $(elem).toggleClass(value);
}
};
if ( method && _internalFn[method] ) {
// Like attr
return _internalFn[method](this[0], arg);
}
};
})(jQuery);
$(function () {
console.log( $('p').classes('length') )
console.group('$.fn.classes()');
console.log( 'classes("length") ' + $('p').classes('length') );
console.log( 'classes("add", [str]) ' + $('p').classes('add', 'new-class-added') );
console.log( 'classes("contains", [str]) ' + $('p').classes('contains', 'new-class-added') );
console.log( 'classes("toggle", [str]) ' + $('p').classes('toggle', 'new-class-added') );
console.log( 'classes("contains", [str]) ' + $('p').classes('contains', 'new-class-added') );
console.log( 'classes("toggle", [str]) ' + $('p').classes('toggle', 'new-class-added') );
console.log( 'classes("remove", [str]) ' + $('p').classes('remove', 'new-class-added') );
console.log( 'classes("item") ' + $('p').classes('item', 4) );
console.log( 'classes("item", [int]) ' + $('p').classes('item', 0) );
console.log( 'classes("length") ' + $('p').classes('length') );
console.groupEnd();
console.log( $('p').eq(1).classes('length') )
console.group('$.fn.classes()');
console.log( 'classes("length") ' + $('p').eq(1).classes('length') );
console.log( 'classes("add", [str]) ' + $('p').eq(1).classes('add', 'new-class-added') );
console.log( 'classes("contains", [str]) ' + $('p').eq(1).classes('contains', 'new-class-added') );
console.log( 'classes("toggle", [str]) ' + $('p').eq(1).classes('toggle', 'new-class-added') );
console.log( 'classes("contains", [str]) ' + $('p').eq(1).classes('contains', 'new-class-added') );
console.log( 'classes("toggle", [str]) ' + $('p').eq(1).classes('toggle', 'new-class-added') );
console.log( 'classes("remove", [str]) ' + $('p').eq(1).classes('remove', 'new-class-added') );
console.log( 'classes("item") ' + $('p').eq(1).classes('item', 4) );
console.log( 'classes("item", [int]) ' + $('p').eq(1).classes('item', 0) );
console.log( 'classes("length") ' + $('p').eq(1).classes('length') );
console.groupEnd();
console.log( $('p').eq(2).classes('length') )
console.group('$.fn.classes()');
console.log( 'classes("length") ' + $('p').eq(2).classes('length') );
console.log( 'classes("add", [str]) ' + $('p').eq(2).classes('add', 'new-class-added') );
console.log( 'classes("contains", [str]) ' + $('p').eq(2).classes('contains', 'new-class-added') );
console.log( 'classes("toggle", [str]) ' + $('p').eq(2).classes('toggle', 'new-class-added') );
console.log( 'classes("contains", [str]) ' + $('p').eq(2).classes('contains', 'new-class-added') );
console.log( 'classes("toggle", [str]) ' + $('p').eq(2).classes('toggle', 'new-class-added') );
console.log( 'classes("remove", [str]) ' + $('p').eq(2).classes('remove', 'new-class-added') );
console.log( 'classes("item") ' + $('p').eq(2).classes('item', 4) );
console.log( 'classes("item", [int]) ' + $('p').eq(2).classes('item', 0) );
console.log( 'classes("length") ' + $('p').eq(2).classes('length') );
console.groupEnd();
console.log( $('p').eq(3).classes('length') )
console.group('$.fn.classes()');
console.log( 'classes("length") ' + $('p').eq(3).classes('length') );
console.log( 'classes("add", [str]) ' + $('p').eq(3).classes('add', 'new-class-added') );
console.log( 'classes("contains", [str]) ' + $('p').eq(3).classes('contains', 'new-class-added') );
console.log( 'classes("toggle", [str]) ' + $('p').eq(3).classes('toggle', 'new-class-added') );
console.log( 'classes("contains", [str]) ' + $('p').eq(3).classes('contains', 'new-class-added') );
console.log( 'classes("toggle", [str]) ' + $('p').eq(3).classes('toggle', 'new-class-added') );
console.log( 'classes("remove", [str]) ' + $('p').eq(3).classes('remove', 'new-class-added') );
console.log( 'classes("item") ' + $('p').eq(3).classes('item', 4) );
console.log( 'classes("item", [int]) ' + $('p').eq(3).classes('item', 0) );
console.log( 'classes("length") ' + $('p').eq(3).classes('length') );
console.groupEnd();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment