jQuery Traversing Methods

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

DOM Traversing Methods Reference:

Method Description
add() Creates a single jQuery object for all added elements, so that it will be easy to manipulate them at the same time. 

Example: var jqObj = $('div').add('p').add('span');
jqObj.addClass('redDiv');
addBack() Creates a single jQuery object for the set of selected elements by selector. 

Example: var jqObj = $('ul:nth-child(3)').nextAll().addBack();
jqObj.addClass('redDiv');
children() Get all the child elements of the selected element(s). 

Example: $('#myDiv').children()
closest() Traversing up through its ancestors in the DOM tree untill it finds first matched element(s) specified by a selector. 

Example: $('#myDiv').closest('p')
contents() Gets children of all the selected element(s), including text and comment nodes. 

Example: $('#myDiv').contents()
each() Iterate over specified elements and execute specified call back function for each element. 

Example: $('#myDiv').each(function(index){ $(this).text() })
end() End the most recent filtering operation in the current chain and return the set of matched elements to its previous state. 

Example: $('div.redDiv').find('p').end().addClass('yellowDiv');
eq() Returns element(s) at the specified index from the selected element (return from selector). 

Example: returns 4th list item: $('li').eq(4);
filter() Reduce the set of matched elements to those that match the selector or pass the function's test. 

Example: $('#myDiv').filter('p');
find() Get all the specified child elements of each selected element(s). 

Example: $('#myDiv').find('p');
first() Get the first occurrence of the specified element. 

Example: $('#myDiv').first();
has() Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element. 

Example: $('#myDiv').has('p');
is() Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments. 

Example: if( $('#myDiv').is('div') ); $('#myDiv').addClass('redDiv');
last() Returns last element that matched specified selector. 

Example: $('#myDiv').last('p');
map() Pass each element in the current matched set through a function, producing a new jQuery object containing the return values.
next() Get the immediately following sibling of the selected element(s). 

Example: $('#myDiv').next();
nextAll() Get the immediately following sibling of the selected element(s). 

Example: $('#myDiv').nextAll();
nextUntil() Gets all next sibling elements between two given arguments 

Example: $('#myDiv').nextUntil('p');
not() Selects elements that do not match the specified selector in not() method. 

The following example returns even li items. (li index starts from 0):
$('li').not(':odd').css('background-color',"red");
offsetParent() Selects the closest ancestor element whose left and top co-ordinates are closest to matched elements by selector. 

The following example returns closest element whose left and top co-ordinates is near by #myDiv:
$( "#myDiv" ).offsetParent().css( "background-color", "red" );
parent() Get the parent of the specified element(s). 

The following example returns parent element of #myDiv:
$('#myDiv').parent();
parents() Selects all ancestor elements of the matched element(s) by a selector. 

The following example returns all the parent elements of #myDiv in a DOM tree:
$('#myDiv').parents();
parentsUntil() Selects all the ancestor elements of the matched element(s), up to but not including the element specified in parentsUntil(). 

The following example returns all the parent elements of #myDiv in a DOM tree until it finds h1 element:
$('#myDiv').parents('h1');
prev() Selects the immediately preceding sibling of the specified element. 

The following example returns preceding sibling element of #myDiv:
$('#myDiv').prev();
prevAll() Selects all preceding siblings of each matched element, optionally filtered by a selector. 

The following example returns all the preceding siblings element of #myDiv:
$('#myDiv').prevAll();
prevUntil() Selects all preceding siblings of each matched element up to but not including matched elements by selector parameter. 

The following example returns all the preceding siblings element of #myDiv till <p> element:
$('#myDiv').prevUntil('p');
siblings() Get the siblings of each specified element(s), optionally filtered by a selector. 

The following example returns all the siblings (previous or next) elements of #myDiv:
$('#myDiv').siblings();
slice() Selects elements by further filtering elements by specifying a selector parameter. 

The following example skips first two list items and returns rest of the list items:
$('li').slice(2);