children, find, contents

Just as there are filters for parents there are some for children, the elements that are contained by the selected element. 

The children(selector) method gets the immediate children of each element in the array and filters them according to the selector. 

If you have:

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

then:

$("p").children("span");

first returns an array of all p elements – in this case the only p element. Next it finds the elements that are immediately contained by each p element and selects just the span elements. That is, it returns an array of all span elements that are immediate children of a p element. In this case only the second span element is returned because the first isn't an immediate child.

The find(selector) method extends the children method to return all of the children that match the selector, not just the immediate children.

For example:

$("p").find("span");

first returns an array of all p elements. Next if finds all of the elements contained within each paragraph element, irrespective of how deeply nested, and selects all of the span elements. In the case of the example above it returns both spans because they are both contained by the p. 

There is one very special child filter that you really need to know about – the contents method returns all children including text nodes, comments and even the contents of iframes. It really does return the contents of every element in the jQuery array.

For example

$("p").content();

returns an array with the complete contents of every "p" element. 

siblings, next, nextAll, nextUntil, prev, prevAll, prevUntil

Siblings are all of the elements immediately contained by the same container element. So, for example, in:

<div>
 <p>Zero</p>
 <p>One</p>
 <p class="title">Two</p>
 <p>Three</p>
 <p>Four</p>
</div>

all of the p elements are siblings and the div is the parent.

If you select the p element with text "Two" then the other p elements are its siblings. The p element containing "One" is the previous sibling of the one containing "Two" and the p element containing "Three" is the next sibling.

With these definitions it is easy to see what the sibling filters do.

The siblings(selector) method selects all of the siblings of each of the elements in the array. 

For example:

$(".title").siblings("p");

first returns all elements that have class set to "title". Then for each element in the array it returns the p elements that are its siblings. In this case the result would be the p elements containing the text "Zero, "One", "Three" and "Four". Notice that the original matching elements are not included in the result. 

The other filters work in the same sort of way.

The next(selector) and prev(selector) methods give you the next or previous siblings that match a selector if one is supplied. 

For example:

$(".title").next("p");

first selects the p element containing the text "Two" and then returns an array with its next sibling i.e. the p element containing the text "Three". 

In the same way:

$(".title").prev("p");

first selects the p element containing the text "Two" and then returns an array with its previous sibling i.e. the p element containing the text "One". 

The nextAll(selector) and the prevAll(selector) work in the same way as next and prev respectively, but they return an array with all of the next and previous siblings, i.e, not just one of the two adjacent to the selected element. 

For example:

$(".title").nextAll("p");

first selects the p element containing the text "Two" and then returns an array with its next siblings, i.e. the p element containing the text "Three" and the one containing the text "Four". 

In the same way:

$(".title").prevAll("p");

first selects the p element containing the text "Two" and then returns an array with its previous siblings, i.e. the p element containing the text "One" and the one containing the text "Zero".

Finally the nextUntil(selector, filter) and prevUntil(selector, filter) work in the same general way as parentsUntil. That is, nextUntil(selector, filter) extracts next siblings that match the filter until it finds a selector; prevUntil works in the same way, but for preceding siblings.

For example if we have:

<div>
 <p>Zero</p>
 <div></div>
 <p>One</p>
 <p class="title">Two</p>
 <p>Three</p>
 <div></div>
 <p>Four</p>
</div>

then: 

$(".title").nextUntil("div","p");

first selects the p element containing the text "Two" and then returns an array with its next p siblings until it reaches the first sibling that is a div. That is, it returns the p element containing the text "Three".

prevUntil works in the same way.

For example:

$(".title").prevUntil("div","p");

first selects the p element containing the text "Two" and then returns an array with its previous p siblings until it reaches the first sibling that is a div. That is, it returns the p element containing the text "One".