Post your short extension functions goodies for jQuery

Question

In a similar vain to the c# extension topic on SO It would be great if we could pull together a whole host of useful jQuery function extensions.

Please Note the idea is to have short snippets of code not full blown well known plugins or ui widgets

Answer 1

// Allows chainable logging
// USAGE: $('#someDiv').hide().log('div hidden').addClass('someClass');
// Demo : http://jsbin.com/odeke
jQuery.log = jQuery.fn.log = function (msg) {
      if ( window.console && window.console.log ) {
         console.log("%s: %o", msg, this);
      }
      return this;
};

Answer 2

The validation plug-in is awesome. Used it in an ASP.NET MVC app to dynamically validate stuff on the client using ajax...even returned custom error messages based on the users input...very cool.

Answer 3

http://plugins.jquery.com/ hosts all manner of plugins, both large and small, and will be a much more comprehensive and useful resource than this thread could ever be, sorry.

Answer 4

Just a shortcut to get/set the ID of an element.

 (function($) {
    $.fn.id = function(newDOMID){
     var $this = $(this); 
     if($this.attr('id')){
      if(!newDOMID){
       $this.id.getID($this);
      }
      else {
       $this.id.setID($this,newDOMID);
      } 
     }
     else {
      alert('The target no longer appears to be a part of the DOM!')
     }
    };
    $.fn.id.getID = function($this){
     return $this.attr('id');
    };
    $.fn.id.setID = function($this,newDOMID){
     $this.attr('id',newDOMID);
     return this
    };
})(jQuery);

It's jID on the jQuery plugins site.

Answer 5

you can use this to see if a selector exists.

if($.exists('#mydiv')) { }

$.exists = function(selector) {
    return ($(selector).length);
}

Answer 6

ah I'm a bit away of the initial question but if there is the "get/set an id" snippet, then I have some code to create unique ids :

$.increment = function (){
    var me = arguments.callee; 
    if (!me.count) me.count = 0;
    return ++me.count;  
}

$.domToSelector = function (jq, options){
    var selectors = [], i = 0; defaults = {}, opts = $.extend(defaults,options);
    $(jq).each(function(){ 
     var $node = $(this); 
     if ($node.attr('id')){
      selectors[i] = '#'+$(this).attr('id');  
     }
     else{
       var customId = ''+new Date; 
       customId = customId.replace(/ /g, '').replace(/:/g, '').replace(/\+/g, '');
       customId = customId+'_'+$.increment();
       if (opts.prefix)  customId = opts.prefix+customId;
       $node.attr('id', customId);
       selectors[i] = '#'+customId;   
     }
     i++; 
    });
    if (selectors.length == 1) selectors = selectors[0]; 
    return selectors;
}

Answer 7

Quick and easy AJAX:

The following allow you to make anchors like

<a href='http://www.google.com/' rel='#myselector' class='ajax' />

which do an AJAX query on the href URL and inject the result into the first element defined by the selector in the anchor's rel attribute.

// Allow hrefs with the class 'ajax' and a rel attribute set with a selector to load content via ajax into the selected element.
$('.ajax').unbind('click').click
(
    function(e)
    {
        $($(this).attr('rel')).load($(this).attr("href"));
        e.preventDefault();
    }
);

Answer 8

Interprets absolute URLs on the page as external links, and sets them to open in a new tab and to have friendly title & class for specific styling.

$("#content [href^='http']:not(a:has('img'))").each(function(){$(this).attr("target", "_blank").addClass("external").attr("title", "External Link to " + $(this).attr("href"))});

Answer 9

Extending selectors, i.e. writing your own custom selectors. Here is a sample for two:

$(document).ready(function(){
    $.extend($.expr[':'], {
        inputEmpty: inputEmpty,
        inputNotEmpty: inputNotEmpty
    });
});

function inputEmpty(el) {
    return $(el).val() == "";
}

function inputNotEmpty(el) {
    return $(el).val() != "";
}