jQuery Tree traversal

Posted on September 11, 2011 | Comments Off on jQuery Tree traversal

.children()
This method get a set of elements containing all of the unique immediate children of each of the matched set of elements.

Example :
$(“div”).children(“.selected”).css(“color”, “blue”);
It finds all children with a class “selected” of each div.

.closest( )
This method get a set of elements containing the closest parent element that matches the specified selector, the starting element included.

Example :
$(‘li.item-a’).closest(‘ul’).css(‘background-color’, ‘red’);
This will change the background color of the closest “ul” .

.find( )
This method searches for descendent elements that match the specified selectors.

Example :

.next()
This method get a set of elements containing the unique next siblings of each of the given set of elements.

Example :
$(“p”).next(“.selected”).css(“background”, “yellow”);
It finds the very next sibling of each paragraph. Keep only the ones with a class “selected”.

.nextAll()
This method is used to find all sibling elements after the current element.

Example :
$(‘li.third-item’).nextAll().css(‘background-color’, ‘red’);

.nextUntil()
It finds all sibling elements after the current element.

Example : Consider the following code :

.offsetParent()
This method get the closest ancestor element that is positioned. The .offsetParent() method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object wrapped around the closest positioned ancestor.

.parent( )
This method get the direct parent of an element.

Example :
It will find the parent element of each paragraph with a class “selected”.

.parents( )
This method gets the ancestors of each element in the current set of matched elements.

Example :
$(‘li.child-a’).parents().css(‘background-color’, ‘red’) ;

.parentsUntil()
The script below change the red background for the level-2 list and the item II.

$(‘li.item-a’).parentsUntil(‘.level-1’).css(‘background-color’, ‘red’);

.prev( )
This method will get the immediately preceding sibling of each element in the set of matched elements.

Example :
$(‘li.third-item’).prev().css(‘background-color’, ‘red’);

.prevAll()
This method will get all preceding sibling of each element in the set of matched elements.

The following script changes red background behind Node 1 and Node 2.

Example :
$(‘li.third-item’).prevAll().css(‘background-color’, ‘red’);

.prevUntil( )
This method gets all preceding siblings of each element up to the provided ‘selector’.

Example:
(‘#term-2’).prevUntil(‘dt’).css(‘background-color’, ‘red’);
This will get all the elements before “term-2” until it would not get “dt” .

.siblings( )
This method gets the siblings of each element in the set of matched elements.

Example :
$(“p”).siblings(“.selected”).css(“background”, “yellow”);
It finds all siblings with a class “selected” of each ‘p’.

• Tweet

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments