has

The has filter returns all of the elements in a result that have a descendant of the specified type, i.e. they contain an element of the specified type. For example:

$("div").has("p");

returns an array of div elements that contain a p element, a paragraph. Any divs selected by the initial selector that don't contain a paragraph are removed by the selector. 

This is like the filters we have met before, except that the condition for keeping an element now depends not on the element but on the DOM tree it is part of. So, for example, if the page is:

<div>
  <p></p>
</div>
<div>
</div>

the command:

$("div").has("p");

first extracts both divs and returns a results array with two elements, then has("p") filters the results to return a new array that consists only of the elements that contain a paragraph – only the first div in this case.

Notice that the single element that is returned is a div, specifically the div that contains the paragraph. 

Now that you have seen the has filter selecting elements based on what they contain, you should be able to guess that there are filters that work with what the element is contained in, the parent filters.

parent filters

Perhaps the next easy set of traversal filters to understand is the set that deals with parents of the elements in the result object.

An immediate parent is the DOM object that immediately contains the object. That is, if a paragraph is contained in a div: 

<div>
 <p></p>
</div>

then the div is the paragraph's parent, or more accurately its immediate parent. 

The parent(selector) method filters the result object testing to see if the immediate parent of each one is selected by the selector. If it is then the parent that is selected is returned. 

For example:

$("p").parent("div");

first selects all the p objects and then filters them to those that have a div as their immediate parent and returns an array of the parent divs.

Notice that you do not get the p objects in the result as you would if this was a simple filter. You get the div elements which are the immediate parents of the p elements, i.e. you get elements that were not in the original array.

Of course the p elements are now the children of each of the divs in the result array. You can now probably guess what the parents(selector) does.

It filters the results array only now selecting elements that have at least one parent of the specified type and it returns an array containing all of the parents. That is, it is the same as parent, but not restricted to just the immediate parent.

For example:

$("p").parents("div");

first selects all of the p objects and then creates a result object that has each of the divs that contain the p object. That is, if a paragraph is contained by three divs then there are three separate divs returned in the result. Notice that if the same element is selected more than once it still only occurs once in the result. 

The big problem with parents is that it tends to return far too many elements. Notice that parents() with no selector returns everything that an element is contained in all the way up to the html object.

Often what you are looking for is the first parent of a particular type. For example, you want to find the closest div that encloses the element. This is what the closest(selector) filter does. It searches up the DOM tree looking for the first parent that matches the selector.

For example:

$("p").closest("div");

first selects all of the p elements and then creates a result object that has the closest div element that contain each p element – the results array consists of div elements. 

Notice that closest starts its search with the current element and that the element in the array may be of the correct type to qualify as being the closest to itself. 

The parentsUntil method provides another way to limit the results of a parent filter. The parentsUntil(selector) method works exactly like parents, but it stops when the parent matches the selector. The results contain all the parents up to, but not including, the one that matched. 

For example:

$("p").parentsUntil("div");

first selects all of the p objects and then creates a result object that has all of the parents of each p object up to but not including the first div. So if you had:

<div>
 <span>
  <p></p>
 </span>
</div>

the result set would include just the span. Again, if the same elements are selected more than once they occur only once in the results.

To make parentsUntil slightly more complicated and slightly more useful, you can also add a filter to specify the type of parent you are looking for.

That is

parentsUntil(selector,filter):

returns only parents that match the filter up to but not including the parent matched by selector. 

For example:

$("p").parentsUntil("div","span");

will return only spans that are parents of the paragraph up to the first div.

The final member of the parent family is offsetParent. This simply returns the closest parent that has a relative, absolute or fixed position attribute. It is mostly used in animation because the closest positioned container determines where its children are positioned.