Creating a Custom jQuery Selector

This demo shows how a custom jQuery selector can be created to provide a re-useable way to locate nodes in the DOM.

HTML

Creating a Custom jQuery Selector
<br /><br />
<button id="showPanelsButton">Show Hidden Panels</button>
<br /><br />
<div class="panel hidden">
   Panel 1
</div>
<div class="panel" style="visibility:hidden">
   Panel 2
</div>
<div class="panel novalid" style="display:none;">
   Panel 3
</div>
<div class="panel">
   Panel 4
</div>

CSS

.hidden
{
    display: none;
}

.panel
{
    border:1px solid black;
    margin-bottom:5px;
}

JavaScript

$.extend($.expr[':'], {
    hiddenPanel: function(pnl) {
        if (pnl == null) return false;
        var $pnl = $(pnl);
        return $pnl.css('display') == 'none' || 
               $pnl.css('visibility') == 'hidden' || 
               $pnl.hasClass('hidden')
    }, 
    novalid: function (elem, index, match) {
        if (elem == null) return false;
        var $elem = $(elem);
        return ($elem.hasClass('novalid'));
    }
});

$('#showPanelsButton').click(function() {
    $('.panel:hiddenPanel')
        .removeClass('hidden')
        .css({ 'display':'', 'visibility':''});
    $('.panel:novalid').css({ 'border-color': 'red'});
});