What JQuery selector excludes items with a parent that matches a given selector?

Solution 1:

The truth of the matter is that jQuery simply does not have a particularly elegant way to do what you want. While chaos' answer does work, you have to wonder whether the complicated selector (that would be about as slow as a selector can be in a complicated webpage) is worth it over the more verbose but faster filter function you have. This is not really that big of a deal, I am just personally weary of particularly long, convoluted selectors when I can avoid it.

A different option is to create your own selector, since jQuery is awesome:

jQuery.expr[':'].parents = function(a,i,m){
    return jQuery(a).parents(m[3]).length < 1;
};

$('.foo,.bar').filter(':parents(.baz)');

The expr map is part of the Sizzle selector engine and documentation can be found here: Sizzle Custom Pseudo-Selectors

Solution 2:

$('.foo:not(.baz .foo),.bar:not(.baz .bar)')

Solution 3:

I couldn't get this to work:

$(".children:not(#parent .children)");

But I can get this to work:

$(".children").not($("#parent .children"));

Note: Not sure if this has something to do with the jQuery version I'm using 1.2.6

Solution 4:

try this one:

$('div').filter(function () {
  return ($(this).parent().not('.baz'));
})