Question

I have a setup like this.

        var element = $(".module-panel", this.el);
        $('.module-panel:not('+element+')').hide();

What I’m trying to do is hide all divs with the class .module-panel except the one that is stored inside the var element.

Answer 1

The easiest way to do this is with .not()

var element = $(".module-panel", this.el);
$('.module-panel').not(element).hide();

Using :not() is entirely possible as well, and although the difference is miniscule, if there are multiple elements you’re matching against, it could make a difference for the favorable CSS3 selector :not().

jQuery creates a method .not() which filters out any element passed to it. CSS3 has a pseudo selector :not() which allows the browser to do the work, making it slightly faster, but not as versatile.

Test results here: http://jsfiddle.net/iredmedia/jPNYK/

The reason your query doesn’t work is because you are concattenating a jQuery object into a query string. In order to make your query work, you must pass it a specific element id/class string, as in

var element = '.doNotReturn',
    excluded = $('#eltFamily:not(' + element + ')').nextMethod();

Hope this helps you understand :not() vs .not();