Hello guys! Welcome to a new section of my tutorial on jQuery. In this tutorial post, i will be explaining the various DOM traversing methods with examples. So read through carefully and as well ask your questions where necessary.
add( selector ) Method
add( selector ) method adds more elements, matched by the given selector, to the set of the matched elements.
Syntax
Below is the syntax to use this method -
selector.add( selector )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - It could be comma separated list of selectors to select elements to be added.
Example
The following example below shows a simple usage of this method -
<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( ) {
$( ".top" ).add( ".middle" ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "above">list 0</li>
<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>
<li class = "below">list 7</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( ) {
$( ".top" ).add( ".middle" ).addClass( selected );
} );
</script>
<style>
.selected { color: green; }
</style>
</head>
<body>
<div>
<ul>
<li class = "above">list 0</li>
<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>
<li class = "below">list 7</li>
</ul>
</div>
</body>
</html>
Output
Below is the output of the above example.
- list 0
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
- list 7
You can also read our tutorial post on: A Comprehensive Guide to DOM Filter Methods in jQuery
andSelf( ) Method
andSelf( ) method adds the previous selection to the current selection. This method is useful when you have multiple traversals in your script and then adding something that was matched before the last traversal.
Syntax
Below is the syntax to use this method -
selector.andSelf( )
Parameter Details
Here is the description of all the parameters used by this methods -
- NA.
Example
The following example below shows a simple usage of this method -
<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( ) {
$( "div" ).find( "p" ).andSelf( ).addClass( "border" );
} );
</script>
<style>
p, div { margin: 5px; padding: 5px; }
.border { border: 2px solid green; }
.background { background: yello; }
</style>
</head>
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</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( ) {
$( "div" ).find( "p" ).andSelf( ).addClass( "border" );
} );
</script>
<style>
p, div { margin: 5px; padding: 5px; }
.border { border: 2px solid green; }
.background { background: yello; }
</style>
</head>
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
First Paragraph
Second Paragraph
children( [selector] ) Method
The children( [selector] ) method gets a set of elements containing all the unique immediate children of each of the matched set of elements
Syntax
Below is the syntax to use this method -
selector.children( [selector] )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - This is an optional argument to filter out all the children. If not supplied then all the children are selected.
Example
The following example below shows a simple usage of this method -
<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( ) {
$( "div" ).children( ".selected" ).addClass( "blue" );
} );
</script>
<style>
.blue { color: blue; }
</style>
</head>
<body>
<div>
<span>Hello</span>
<p class = "selected">Hello Again</p>
<div class = "selected">And Again</div>
<p class = "biggest">And One Last Time</p>
</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( ) {
$( "div" ).children( ".selected" ).addClass( "blue" );
} );
</script>
<style>
.blue { color: blue; }
</style>
</head>
<body>
<div>
<span>Hello</span>
<p class = "selected">Hello Again</p>
<div class = "selected">And Again</div>
<p class = "biggest">And One Last Time</p>
</div>
</body>
</html>
Output
Below is the output of the above example.
Hello
Hello Again
And Again
And One Last Time
Hello Again
And Again
And One Last Time
You can also read our tutorial post on: An Introduction to jQuery
closest( selector ) Method
closest( selector ) method works by first looking at the current element to see if it matches the specified expression, if so it returns the element itself. If it doesn't match then it will continue to traverse up all the document, parent by parent, until an element is found that matches the specified expression. If no matching element is found, then none is returned.
Syntax
Below is the syntax to use this method -
selector.closest( selector )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - This is the selector to be used to filter the elements.
Example
The following example below shows a simple usage of this method -
<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( ) {
$( document ).bind( "click" , function( e ) {
$( e.target ).closest( "li" ).toggleClass( "highlight" );
} );
} );
</script>
<style>
.highlight { color: green; background: yellow; }
</style>
</head>
<body>
<div>
<p>Click on the items below to see results:</p>
<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( ) {
$( document ).bind( "click" , function( e ) {
$( e.target ).closest( "li" ).toggleClass( "highlight" );
} );
} );
</script>
<style>
.highlight { color: green; background: yellow; }
</style>
</head>
<body>
<div>
<p>Click on the items below to see results:</p>
<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.
Click on the items below to see results:
- list 1
- list 2
- list 3
- list 4
- list 5
- list 6
contents( ) Method
contents( ) method finds all the child nodes that are inside the matched elements (including text nodes ), or the content document, if the element is an iframe.
Syntax
Below is the syntax to use this method -
selector.contents( )
Parameter Details
Here is the description of all the parameters used by this methods -
- NA.
Example
The following example below shows a simple usage of this method -
<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( ) {
var $content = $( "iframe" ).contents();
$content.find( "body" ).append( "I'm in an iframe!" );
} );
</script>
</head>
<body>
<iframe src = "https://www.webdesigntutorialz.com" width = "300" height = "100"></iframe>
</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( ) {
var $content = $( "iframe" ).contents();
$content.find( "body" ).append( "I'm in an iframe!" );
} );
</script>
</head>
<body>
<iframe src = "https://www.webdesigntutorialz.com" width = "300" height = "100"></iframe>
</body>
</html>
Output
Below is the output of the above example.
You can also read our tutorial post on: Traversing DOM Elements with the help of jQuery
end( ) Method
The end( ) method reverses the most recent destructive operation, thereby changing the set of matched elements to its previous state right before the destructive operation.
Syntax
Below is the syntax to use this method -
operations.end( )
Parameter Details
Here is the description of all the parameters used by this methods -
- NA.
Example
The following example below shows a simple usage of this method. This selects all of the paragraphs, finds span elements inside this, and reverts the selection back to the paragraphs.
<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( ) {
$( document ).bind( "click" , function( e ) {
$( "p" ).find( "span" ).end( ).css( "border" , "2px solid green" );
} );
</script>
<style>
<p> { margin: 10px; padding: 10px; }
</style>
</head>
<body>
<p><span>Hello</span>, how are you?</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( ) {
$( document ).bind( "click" , function( e ) {
$( "p" ).find( "span" ).end( ).css( "border" , "2px solid green" );
} );
</script>
<style>
<p> { margin: 10px; padding: 10px; }
</style>
</head>
<body>
<p><span>Hello</span>, how are you?</p>
</body>
</html>
Output
Below is the output of the above example.
Hello, how are you?
find( selector ) Method
The find( selector ) method searches for the descendant elements that match the specified selector.
Syntax
Below is the syntax to use this method -
selector.find( selector )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - The selector can be written using CSS 1 - 3 selector syntax.
Example
The following example below shows a simple usage of this method -
<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><span>Hello</span>, how are you?</p>
<p>Me? I'm<span>good</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><span>Hello</span>, how are you?</p>
<p>Me? I'm<span>good</span>.</p>
</body>
</html>
Output
Below is the output of the above example.
Hello, how are you?
Me? I'm good.
Me? I'm good.
You can also read our tutorial post on: Understanding the Basics of jQuery
next( [selector] ) Method
next( [selector] ) method gets a set of elements containing the unique next siblings of each of the given set of elements.
Syntax
Below is the syntax to use this method -
selector.next( [selector] )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - This optional selector can be written using CSS 1 - 3 selector syntax. If we supply a selector expression, the element is indisputably included as part of the object. If we do not supply one, the element would be tested for a match before it was included.
Example
The following example below shows a simple usage of this method -
<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" ).next( ".selected" ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<p>Hello</p>
<p class = "selected">Hello Again</p>
<div><span>And Again</span></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( ) {
$( "p" ).next( ".selected" ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<p>Hello</p>
<p class = "selected">Hello Again</p>
<div><span>And Again</span></div>
</body>
</html>
Output
Below is the output of the above example.
Hello
And Again
Hello Again
And Again
nextAll( [selector] ) Method
nextAll( [selector] ) method finds all the sibling elements after the current element.
Syntax
Below is the syntax to use this method -
selector.nextAll( [selector] )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - This optional selector can be written using CSS 1 - 3 selector syntax. If we supply a selector, then result would be filtered out.
Example
The following example below shows a simple usage of this method -
<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( ) {
$( "div:first" ).nextAll( ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<div>firs</div>
<div>Siblings<div>child</div></div>
<div>Sibling</div>
<div>Sibling</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( ) {
$( "div:first" ).nextAll( ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<div>firs</div>
<div>Siblings<div>child</div></div>
<div>Sibling</div>
<div>Sibling</div>
</body>
</html>
Output
Below is the output of the above example.
first
Siblings
child
Sibling
Sibling
You can also read our tutorial post on: The IE 4 DOM in JavaScript with examples
offsetParent( ) Method
offsetParent( ) method returns the positioned parent(e.g. relative, absolute) of a first selected element.
Syntax
Below is the syntax to use this method -
selector.offsetParent( )
Parameter Details
Here is the description of all the parameters used by this methods -
- Na.
Example
The following example below shows a simple usage of this method -
<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" ).offsetParent( ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<span>Top Element</span>
<div style= "position: relative;">
<div>Siblings<div>child</div></div>
<p>Sibling</p>
<span>Sibling</span>
</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( ) {
$( "p" ).offsetParent( ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<span>Top Element</span>
<div style= "position: relative;">
<div>Siblings<div>child</div></div>
<p>Sibling</p>
<span>Sibling</span>
</div>
</body>
</html>
Output
Below is the output of the above example.
Top Element
Siblings
child
Sibling
Sibling
parent( [selector] ) Method
parent( [selector] ) method gets a direct parent of an element. If called on a set of elements, the parent the set of their unique direct parent elements.
Syntax
Below is the syntax to use this method -
selector.parent( [selector] )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - This is an optional selector to filter the parent with.
Example
The following example below shows a simple usage of this method -
<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" ).parent( ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<span>Top Element</span>
<div>
<div>Siblings<div>child</div></div>
<p>Sibling</p>
<span>Sibling</span>
</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( ) {
$( "p" ).parent( ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<span>Top Element</span>
<div>
<div>Siblings<div>child</div></div>
<p>Sibling</p>
<span>Sibling</span>
</div>
</body>
</html>
Output
Below is the output of the above example.
Top Element
Siblings
child
Sibling
Sibling
You can also read our tutorial post on: The Legacy DOM in JavaScript
parents( [selector] ) Method
The parents( [selector] ) method gets a set of elements containing the unique ancestors of the matched set of elements except for the root element.
Syntax
Below is the syntax to use this method -
selector.parents( [selector] )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - This is an optional selector to filter the ancestors with.
Example
The following example below shows a simple usage of this method -
<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( ) {
var parentEls = $( "p" ).parents( )
.map( function( ) {
return this.tagName;
} ).get( ).join( ", " );
$( "b" ).append( "<strong>" + parentEls + "</strong>" );
} );
</script>
</head>
<body>
<span>Top Element</span>
<div>
<div class = "top">Top division
<p class = "first">First Sibling</p>
<span>Second Sibling</span>
<p class = "third">Third Sibling</p>
</div>
<b>Parents of <p> elements are: </b>
</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( ) {
var parentEls = $( "p" ).parents( )
.map( function( ) {
return this.tagName;
} ).get( ).join( ", " );
$( "b" ).append( "<strong>" + parentEls + "</strong>" );
} );
</script>
</head>
<body>
<span>Top Element</span>
<div>
<div class = "top">Top division
<p class = "first">First Sibling</p>
<span>Second Sibling</span>
<p class = "third">Third Sibling</p>
</div>
<b>Parents of <p> elements are: </b>
</div>
</body>
</html>
Output
Below is the output of the above example.
Top Element
Top division
First Sibling
Second Sibling
Third Sibling
Parents of DIV, DIV, BODY, HTML
elements are: DIV, DIV, BODY, HTML
Third Sibling
Parents of DIV, DIV, BODY, HTML
elements are: DIV, DIV, BODY, HTML
prev( [selector] ) Method
prev( [selector] ) method gets the immidiately preceding sibling of each element in the set of matched elements, optionally been filtered by a selector.
Syntax
Below is the syntax to use this method -
selector.prev( [selector] )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - The optional selector to filter the previous Element with.
Example
The following example below shows a simple usage of this method -
<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" ).prev( ".selected" ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<div><span>Hello</span></div>
<p class = "selected">Hello Again</p>
<p>And Again</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" ).prev( ".selected" ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<div><span>Hello</span></div>
<p class = "selected">Hello Again</p>
<p>And Again</p>
</body>
</html>
Output
Below is the output of the above example.
Hello
And Again
Hello Again
And Again
You can also read our tutorial post on: JavaScript Math Methods
prevAll( [selector] ) Method
prevAll( [selector] ) method finds all the sibling elements after the current element.
Syntax
Below is the syntax to use this method -
selector.prevAll( [selector] )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - This is the optional selector to filter the previous Element with.
Example
The following example below shows a simple usage of this method -
<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( ) {
$( "div:last" ).prevAll( ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<div>first</div>
<div>Siblings<div>child</div></div>
<div>Sibling</div>
<div>Sibling</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( ) {
$( "div:last" ).prevAll( ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<div>first</div>
<div>Siblings<div>child</div></div>
<div>Sibling</div>
<div>Sibling</div>
</body>
</html>
Output
Below is the output of the above example.
first
Siblings
child
Sibling
Sibling
siblings( [selector] ) Method
The siblings( [selector] ) method gets a set of elements containing all of the unique siblings of each of the matched set of elements.
Syntax
Below is the syntax to use this method -
selector.siblings( [selector] )
Parameter Details
Here is the description of all the parameters used by this methods -
- selector - This is the optional selector to filter the sibling Elements with.
Example
The following example below shows a simple usage of this method -
<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" ).siblings( ".selected" ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<div><span>Hello</span></div>
<p class = "selected">Hello Again</p>
<p>And Again</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" ).siblings( ".selected" ).addClass( "highlight" );
} );
</script>
<style>
.highlight { background: yellow; }
</style>
</head>
<body>
<div><span>Hello</span></div>
<p class = "selected">Hello Again</p>
<p>And Again</p>
</body>
</html>
Output
Below is the output of the above example.
Hello
And Again
Hello Again
And Again
Alright guys! We have come to the end of this tutorial post on jQuery DOM Traversing Method. In my next tutorial post, i will be talking about CSS Selectors Methods.
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 handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails. Thanks for reading and bye for now.
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 handles available and also subscribe to our newsletter to get our tutorial posts delivered directly to your emails. Thanks for reading and bye for now.