Select all elements that are not a descendant of a

Question

Using a jQuery selector, is it possible to select all elements that are not a descendant of the elements from another selector.

For example, I would like to select all the a tags that are not a descendant of a th tag. The only way I can see to do it right now is as follows:

$('a').filter(function () {
   return $(this).closest('th').size() == 0
})

Answer 1

Assuming that you do want to do as your question asks (regardless of the invalid HTML fact) and filter out elements with a specific sibling,

You can do this:

$('a').filter(function() {
    return $(this).siblings('b').length == 0;
}).css('color', 'orange');

HTML:

<div>
    <b>Hello there</b>
    <a>Don't select me!</a>
</div>

<div>
    <a>Select me!</a>
    <a>Select me too!</a>
</div>

See http://jsfiddle.net/JR5sP/1/

Answer 2

Assuming you are looking for descendants (since having a a element as a sibling to th elements is not valid HTML) you can use the :not pseudo-selector to do this:

$('a:not(th a)');

This should be pretty fast in modern browsers using document.querySelectorAll, but might be slower than the original for older versions of IE.

See a simple demo here: http://jsfiddle.net/JR5sP/