Select elements whose children don't contain specific elements in jQuery

Question

I want to select all divs on a page whose children don't contain an element with a specific class.

I can select elements whose descendants do contain the class with:

$('div').has('.myClass');

So I just want the inverse of this.

Answer 1

I'd use ".filter()":

var theDivs = $('div').filter(function() {
  return $(this).find('.myclass').length === 0;
});

Answer 2

A simple $("div:not(:has(.myClass))") will do the job.

How it works internally in jQuery?

1) $("div") - gets all DIVs from the document.

2) :not(:has(.myClass)) - These are two statements one nested in another. Now jQuery executes :has(.myClass) on resulted DIVs in above step and gets all DIVs with class name 'myClass'

3) :not() - This pseudo-selector method will be applied on All DIVs from Step 1 against the DIVs resulted from second statement to find DIVs without '.myClass'. This is possible by looping through all DIVs from Step 1 and comparing DIVs from second step.

Answer 3

$('div:not(:has(*>.myClass))');