DOM / Traversing

end() : jQuery

End the most recent 'destructive' operation, reverting the list of matched elements back to its previous state. After an end operation, the list of matched elements will revert to the last state of matched elements.

If there was no destructive operation before, an empty set is returned.

Example

Selects all paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.

Before

<p><span>Hello</span>, how are you?</p>

Code

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

Result

[ <p>...</p> ]

find(String expr) : jQuery

expr	String	An expression to search with.

Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process.

All searching is done using a jQuery expression. The expression can be written using CSS 1-3 Selector syntax, or basic XPath.

Example

Starts with all paragraphs and searches for descendant span elements, same as $("p span")

Before

<p><span>Hello</span>, how are you?</p>

Code

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

Result

[ <span>Hello</span> ]

filter(String expression) : jQuery

expression	String	Expression(s) to search with.

Removes all elements from the set of matched elements that do not match the specified expression(s). This method is used to narrow down the results of a search.

Provide a comma-separated list of expressions to apply multiple filters at once.

Examples

Selects all paragraphs and removes those without a class "selected".

Before

<p class="selected">Hello</p><p>How are you?</p>

Code

$("p").filter(".selected")

Result

[ <p class="selected">Hello</p> ]

Selects all paragraphs and removes those without class "selected" and being the first one.

Before

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

Code

$("p").filter(".selected, :first")

Result

[ <p>Hello</p>, <p class="selected">And Again</p> ]

filter(Function filter) : jQuery

filter	Function	A function to use for filtering

Removes all elements from the set of matched elements that do not pass the specified filter. This method is used to narrow down the results of a search.

Example

Remove all elements that have a child ol element

Before

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

Code

$("p").filter(function(index) {
  return $("ol", this).length == 0;
})

Result

[ <p>How are you?</p> ]

not(Element el) : jQuery

el	Element	An element to remove from the set

Removes the specified Element from the set of matched elements. This method is used to remove a single Element from a jQuery object.

Example

Removes the element with the ID "selected" from the set of all paragraphs.

Before

<p>Hello</p><p id="selected">Hello Again</p>

Code

$("p").not( $("#selected")[0] )

Result

[ <p>Hello</p> ]

not(String expr) : jQuery

expr	String	An expression with which to remove matching elements

Removes elements matching the specified expression from the set of matched elements. This method is used to remove one or more elements from a jQuery object.

Example

Removes the element with the ID "selected" from the set of all paragraphs.

Before

<p>Hello</p><p id="selected">Hello Again</p>

Code

$("p").not("#selected")

Result

[ <p>Hello</p> ]

not(jQuery elems) : jQuery

elems	jQuery	A set of elements to remove from the jQuery set of matched elements.

Removes any elements inside the array of elements from the set of matched elements. This method is used to remove one or more elements from a jQuery object.

Example

Removes all elements that match "div p.selected" from the total set of all paragraphs.

Before

<div><p>Hello</p><p class="selected">Hello Again</p></div>

Code

$("p").not( $("div p.selected") )

Result

[ <p>Hello</p> ]

add(String expr) : jQuery

expr	String	An expression whose matched elements are added

Adds more elements, matched by the given expression, to the set of matched elements.

Example

Before

<p>Hello</p><span>Hello Again</span>

Code

$("p").add("span")

Result

[ <p>Hello</p>, <span>Hello Again</span> ]

add(String html) : jQuery

html	String	A string of HTML to create on the fly.

Adds more elements, created on the fly, to the set of matched elements.

Example

Before

<p>Hello</p>

Code

$("p").add("<span>Again</span>")

Result

[ <p>Hello</p>, <span>Again</span> ]

add(Element|Array elements) : jQuery

elements	Element\|Array	One or more Elements to add

Adds one or more Elements to the set of matched elements.

Examples

Before

<p>Hello</p><p><span id="a">Hello Again</span></p>

Code

$("p").add( document.getElementById("a") )

Result

[ <p>Hello</p>, <span id="a">Hello Again</span> ]

Before

<p>Hello</p><p><form><input/><button/></form>

Code

$("p").add( document.forms[0].elements )

Result

[ <p>Hello</p>, <input/>, <button/> ]

is(String expr) : Boolean

expr	String	The expression with which to filter

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.

Does return false, if no element fits or the expression is not valid.

filter(String) is used internally, therefore all rules that apply there apply here, too.

Examples

Returns true, because the parent of the input is a form element

Before

<form><input type="checkbox" /></form>

Code

$("input[@type='checkbox']").parent().is("form")

Result

true

Returns false, because the parent of the input is a p element

Before

<form><p><input type="checkbox" /></p></form>

Code

$("input[@type='checkbox']").parent().is("form")

Result

false

parent(String expr) : jQuery

expr	String	(optional) An expression to filter the parents with

Get a set of elements containing the unique parents of the matched set of elements.

Can be filtered with an optional expressions.

Examples

Find the parent element of each paragraph.

Before

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

Code

$("p").parent()

Result

[ <div><p>Hello</p><p>Hello</p></div> ]

Find the parent element of each paragraph with a class "selected".

Before

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

Code

$("p").parent(".selected")

Result

[ <div class="selected"><p>Hello Again</p></div> ]

parents(String expr) : jQuery

expr	String	(optional) An expression to filter the ancestors with

Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).

Can be filtered with an optional expressions.

Examples

Find all parent elements of each span.

Before

<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>

Code

$("span").parents()

Result

[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]

Find all parent elements of each span that is a paragraph.

Before

<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>

Code

$("span").parents("p")

Result

[ <p><span>Hello</span></p> ]

next(String expr) : jQuery

expr	String	(optional) An expression to filter the next Elements with

Get a set of elements containing the unique next siblings of each of the matched set of elements.

It only returns the very next sibling, not all next siblings.

Can be filtered with an optional expressions.

Examples

Find the very next sibling of each paragraph.

Before

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

Code

$("p").next()

Result

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

Find the very next sibling of each paragraph that has a class "selected".

Before

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

Code

$("p").next(".selected")

Result

[ <p class="selected">Hello Again</p> ]

prev(String expr) : jQuery

expr	String	(optional) An expression to filter the previous Elements with

Get a set of elements containing the unique previous siblings of each of the matched set of elements.

Can be filtered with an optional expressions.

It only returns the immediately previous sibling, not all previous siblings.

Examples

Find the very previous sibling of each paragraph.

Before

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Code

$("p").prev()

Result

[ <div><span>Hello Again</span></div> ]

Find the very previous sibling of each paragraph that has a class "selected".

Before

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

Code

$("p").prev(".selected")

Result

[ <div><span>Hello</span></div> ]

siblings(String expr) : jQuery

expr	String	(optional) An expression to filter the sibling Elements with

Get a set of elements containing all of the unique siblings of each of the matched set of elements.

Can be filtered with an optional expressions.

Examples

Find all siblings of each div.

Before

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Code

$("div").siblings()

Result

[ <p>Hello</p>, <p>And Again</p> ]

Find all siblings with a class "selected" of each div.

Before

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

Code

$("div").siblings(".selected")

Result

[ <p class="selected">Hello Again</p> ]

children(String expr) : jQuery

expr	String	(optional) An expression to filter the child Elements with

Get a set of elements containing all of the unique children of each of the matched set of elements.

Can be filtered with an optional expressions.

Examples

Find all children of each div.

Before

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

Code

$("div").children()

Result

[ <span>Hello Again</span> ]

Find all children with a class "selected" of each div.

Before

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

Code

$("div").children(".selected")

Result

[ <p class="selected">Hello Again</p> ]

contains(String str) : jQuery

str	String	The string that will be contained within the text of an element.

Filter the set of elements to those that contain the specified text.

Example

Before

<p>This is just a test.</p><p>So is this</p>

Code

$("p").contains("test")

Result

[ <p>This is just a test.</p> ]

$.parents(Element elem) : Array

elem	Element	The element to find the ancestors of.

All ancestors of a given element.

$.nth(DOMElement cur, String|Number num, String dir) : DOMElement

cur	DOMElement	The element to search from.
num	String\|Number	The Nth result to match. Can be a number or a string (like 'even' or 'odd').
dir	String	The direction to move in (pass in something like 'previousSibling' or 'nextSibling').

A handy, and fast, way to traverse in a particular direction and find a specific element.

$.sibling(Element elem) : Array

elem	Element	The element to find all the siblings of (including itself).

All elements on a specified axis.

jQuery website jQuery documentation

DOM / Traversing

end() : jQuery

Example

Before

Code

Result

find(String expr) : jQuery

Example

Before

Code

Result

filter(String expression) : jQuery

Examples

Before

Code

Result

Before

Code

Result

filter(Function filter) : jQuery

Example

Before

Code

Result

not(Element el) : jQuery

Example

Before

Code

Result

not(String expr) : jQuery

Example

Before

Code

Result

not(jQuery elems) : jQuery

Example

Before

Code

Result

add(String expr) : jQuery

Example

Before

Code

Result

add(String html) : jQuery

Example

Before

Code

Result

add(Element|Array elements) : jQuery

Examples

Before

Code

Result

Before

Code

Result

is(String expr) : Boolean

Examples

Before

Code

Result

Before

Code

Result

parent(String expr) : jQuery

Examples

Before

Code

Result

Before

Code

Result

parents(String expr) : jQuery

Examples

Before

Code

Result

Before