grandParent plugin

by kswedberg

HTML

<div class="great-grandparent">
  <div class="grandparent">
    <div class="parent">
        <div class="child">
        </div>
    </div>
  </div>
</div>
<p>You should see class names in the following order:<br>
    child, grandparent, grandparent, grandparent, undefined, child
</p>
<div id="log"></div>

JavaScript

(function($) {
    $.fn.grandparent = function(parentFilter, grandFilter) {
        if (!grandFilter) {
            grandFilter = parentFilter;
            parentFilter = undefined;
        }

        var els = this.parent(parentFilter).parent(grandFilter);
        return this.pushStack(els.get());
    };
})(jQuery);

function logClass( el ) {
    var className = el[0] && el[0].className || 'undefined';
    $('#log').append(className + '<br>')
}

var $child = $('div.child');
// print the child class
logClass( $child );
// print the grandparent class
logClass( $child.grandparent() );
// grandparent again
logClass( $child.grandparent( '.parent', '.grandparent' ) );
// and grandparent again
logClass( $child.grandparent( '.grandparent' ) );
// undefined
logClass( $child.grandparent('.noworkie') );
// child
logClass( $child.grandparent().end() );