✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

jQuery Traversing

jQuery Traversing is the best way to select,find and manipulate the elements.With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the family tree.



Traversing Ancestors

There are many useful methods for traversing up like parent(), parents() etc.


<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
  $("p").parent();
});
</script>
</head>
<body>
<div>
<p>This is the example of Traversing Ancestor</p>
</div>
</body>
</html>

The above example gives the direct parent of the p element.



Traversing Descedants

This is used to get chid, grandchild and other childs of the parent.There are many methods children(), find() etc.


<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
  $("div").children();
});
</script>
</head>
<body>
<div>
<p>This is the example of Traversing Descedants</p>
</div>
</body>
</html>

The above example gives the all elements present in the div element.



Traversing Siblings

There are many useful methods for traversing siblings(brothers, sisters) like siblings(), next(), prev() etc.


<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
  $("li").siblings();
});
</script>
</head>
<body>
<div>
<p>This is the example of Traversing Descedants</p>
<ul>
<li>Apple</li>
<li>Mango</li>
<li>Orange</li>
</ul>
</div>
</body>
</html>

The above example gives all the li elements present on the parent .



All jQuery Traversing Methods

  • parent( [selector] )Get the direct parent of an element. If called on a set of elements, parent returns a set of their unique direct parent elements.

  • parents( [selector] )Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).

  • eq( index )Reduce the set of matched elements to a single element.

  • children( [selector])Get a set of elements containing all of the unique immediate children of each of the matched set of elements.

  • siblings( [selector] )Get a set of elements containing all of the unique siblings of each of the matched set of elements.

  • next( [selector] )Get a set of elements containing the unique next siblings of each of the given set of elements.

  • nextAll( [selector] )Find all sibling elements after the current element.

  • prev( [selector] )Get a set of elements containing the unique previous siblings of each of the matched set of elements.

  • prevAll( [selector] )Find all sibling elements in front of the current element.

  • find( selector )Searches for descendent elements that match the specified selectors.

  • filter( selector )Removes all elements from the set of matched elements that do not match the specified selector(s).

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

  • slice( start, [end] )Selects a subset of the matched elements.

  • not( selector )Removes elements matching the specified selector from the set of matched elements.

  • add( selector )Adds more elements, matched by the given selector, to the set of matched elements.

  • closest( selector )Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.

  • contents( )Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.

  • end( )Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state .

❮ PreviousNext ❯