Process Element Class List

by bizamajig

HTML

<div id="yours" class="Lorem ipsum dolor_spec sit amet"></div>
<div id="mine" class="harder better faster stronger"></div>
<span class="added a few to-demonstrate"></span>
<span id="callback" class="callback-activated"></span>

<ol id="all">
    <li class="bf">List of all classes in DOM</li>
</ol>

<ol id="divs-results">
    <li class="bf">List of all classes on the divs</li>
</ol>

<ol id="your-results">
    <li class="bf">List of all classes on your div</li>
</ol>

<ol id="my-results">
    <li class="bf">List of all classes on my div</li>
</ol>

CSS

.bf {
    font-weight:bold;
}

ol { float:left; width:25%; }

JavaScript

(function($){
    $.fn.classes = function(f) {
        var c = [];
        $.each(this, function(i, v) {
            var _ = v.className.split(/\s+/);
            for(var j in _)
                '' === _[j] || c.push(_[j]);
        });
        c = $.unique(c);
        if ("function" === typeof f)
            for(var j in c)
                f(c[j]);
        return c;
    };
})(jQuery);

// all of the DOM's classes
var allClasses = $('*').classes();
$.each(allClasses, function(i, v) {
    var _ = document.createElement('li');
    _.innerHTML = v;
    $('#all').append(_);        
});

// all of the div's classes
var divClasses = $('div').classes();
$.each(divClasses, function(i, v) {
    var _ = document.createElement('li');
    _.innerHTML = v;
    $('#divs-results').append(_);        
});


// the classes on your div
var yourClasses = $('#yours').classes();
$.each(yourClasses, function(i, v) {
    var _ = document.createElement('li');
    _.innerHTML = v;
    $('#your-results').append(_);        
});

// the classes on my div using a callback
var yourClasses = $('#mine').classes(function(v) {
    var _ = document.createElement('li');
    _.innerHTML = v;
    $('#my-results').append(_);   
});


// using callback to trigger an alert
$('#callback').classes(function(c) {
    alert(c);            
});