Hello guys! Welcome to my new tutorial post on jQuery. In this tutorial post, i will be discussing about jQuery DOM traversing.
jQuery is a very powerful tool which provides a variety of DOM traversal methods to help users select elements in a document randomly as well as in a sequential method. Most of the DOM Traversal Methods do not modify the jQuery object and they are used to filter out elements from a document based on some given conditions.
jQuery is a very powerful tool which provides a variety of DOM traversal methods to help users select elements in a document randomly as well as in a sequential method. Most of the DOM Traversal Methods do not modify the jQuery object and they are used to filter out elements from a document based on some given conditions.
Find Elements by Index
Let us consider a simple document with the following HTML content -
<html>
<head>
<title>jQuery Example</title>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example -
- list 1
- list 2
- list 3
- list 4
- list 4
- list 5
- list 6
You can also read our tutorial post on: A Practical Guide to jQuery Attribute Methods
- Above every list has its own index, and can be located directly by using eq( index ) method as shown in the example below.
- Every child element starts its index from zero. Thus, list item 2 would be accessed by using the $( "li" ).eq( 1 ) and so on.
Example
Following is a simple example which will add a green color to list 2 -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).eq( 2 ).addClass( "selected" );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).eq( 2 ).addClass( "selected" );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
You can also read our tutorial post on: The Complete List of Selectors in jQuery
Filtering out Elements
The filter(selector) method can be used to filter out all elements from the set of the matched elements that to not match any of the specified selectors. The selector can be written using any selector syntax.
Example
Following is a simple example which applies color to the lists associated with middle class -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).filter( ".middle" ).addClass( "selected" );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
</ul>
</div>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "li" ).filter( ".middle" ).addClass( "selected" );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "top">list 1</li>
<li class = "top">list 2</li>
<li class = "middle">list 3</li>
<li class = "middle">list 4</li>
<li class = "bottom">list 5</li>
<li class = "bottom">list 6</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
Locating Descendant Elements
The find(selector) method can be used to locate all the descendant elements of a particular type of elements. The selector can be written using any selector syntax.
Example
Following is a simple example which selects all the <span> elements available inside different <p> elements -
<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "p" ).find( "span" ).addClass( "selected" );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<p>This is the first Paragraph and <span>This Is Green</span></p>
<p>This is the second Paragraph and <span>This Is Also Green</span></p>
</body>
</html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script type = "text/javascript">
$( document ).ready( function( ) {
$( "p" ).find( "span" ).addClass( "selected" );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<p>This is the first Paragraph and <span>This Is Green</span></p>
<p>This is the second Paragraph and <span>This Is Also Green</span></p>
</body>
</html>
Output
Below is the output of the above example.
This is the first Paragraph and This Is Green
This is the second Paragraph and This Is Also Green
This is the second Paragraph and This Is Also Green
You can also read our tutorial post on: Understanding the Basics of jQuery
jQuery DOM Filter Methods
The following table lists down useful methods which you can make use of to filter out various elements from a list of DOM elements -
| Sr.No. | Method & Description |
|---|---|
| 1 | eq( index )
Reduce the set of matched elements to a single element.
|
| 2 | filter( selector )
Removes all elements from the set of matched elements that do not match the specified selector(s).
|
| 3 | filter( fn )
Removes all elements from the set of matched elements that do not match the specified function.
|
| 4 | is( selector )
Checks the current selection against an expression and returns true, if at least one element of the selection fits the given selector.
|
| 5 | map( callback )
Translate a set of elements in the jQuery object into another set of values in a jQuery array (which may, or may not contain elements).
|
| 6 | not( selector )
Removes elements matching the specified selector from the set of matched elements.
|
| 7 | slice( start, [end] )
Selects a subset of the matched elements.
|
In my next tutorial post, i will be making use of few examples to illustrate how the above listed methods can be implemented in jQuery.
You can also read our tutorial post on: Python on OS X
jQuery DOM Traversing Method
Following table below lists down other useful methods which you can make use of to locate various elements in a DOM -
| Sr.No. | Methods & Description |
|---|---|
| 1 | add( selector )
Adds more elements, matched by the given selector, to the set of matched elements.
|
| 2 | andSelf( )
Add the previous selection to the current selection.
|
| 3 | children( [selector])
Get a set of elements containing all of the unique immediate children of each of the matched set of elements.
|
| 4 | closest( selector )
Get a set of elements containing the closest parent element that matches the specified selector, the starting element included.
|
| 5 | contents( )
Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.
|
| 6 | end( )
Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state.
|
| 7 | find( selector )
Searches for descendant elements that match the specified selectors.
|
| 8 | next( [selector] )
Get a set of elements containing the unique next siblings of each of the given set of elements.
|
| 9 | nextAll( [selector] )
Find all sibling elements after the current element.
|
| 10 | offsetParent( )
Returns a jQuery collection with the positioned parent of the first matched element.
|
| 11 | 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.
|
| 12 | parents( [selector] )
Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element).
|
| 13 | prev( [selector] )
Get a set of elements containing the unique previous siblings of each of the matched set of elements.
|
| 14 | prevAll( [selector] )
Find all sibling elements in front of the current element.
|
| 15 | siblings( [selector] )
Get a set of elements containing all of the unique siblings of each of the matched set of elements.
|
Alright guys! We have come to the end of this tutorial post. Feel free to ask your questions via the comment box below and i will attend to them as soon as possible.
Follow us on our various social media platforms available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.
Thanks for reading and bye for now.
Follow us on our various social media platforms available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails.
Thanks for reading and bye for now.