jquery.ba-logselector.js

/*!
 * jQuery log selector - v0.1pre - 10/22/2010
 * http://benalman.com/
 * 
 * Copyright (c) 2010 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

// Log the selector used to select elements to each selected element,
// otherwise to the body. Hover over logged selectors to highlight
// stuff all fancy-like (note: don't select SPAN elements because this
// creates them all over the place!)

(function($){
  
  $.fn.logSelector = function() {
    var elems = $( '<span>' + this.selector + ' [' + this.length + ']</span>' )
      .appendTo( this.length ? this : 'body' );
    
    this.length && elems.hover(function(e){
      elems.parent().andSelf().toggleClass( 'hover', e.type === 'mouseenter' );
    });
    
    return this;
  };
  
})(jQuery);

/*

Use with this CSS:

.hover {
    background: #afa;
}

span {
    padding: 1px;
    display: block;
    font-weight: 400;
    cursor: default;
}

span.hover {
    color: #fff;
    background: #0a0;
}

*/