Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add the previous set of elements on the stack to the current set in jQuery?
jQuery is a feature-rich JavaScript library. We can perform a lot of actions with the help of jQuery which would otherwise require writing large pieces of code. It makes DOM manipulation, event handling, animation, ajax, etc. very easy.
In this tutorial, we will learn to add the previous set of elements on the stack to the current set. jQuery maintains an internal stack of the changes that are performed to the matched stack. When the DOM traversal functions or methods are called, the new elements are pushed into the stack. So to use previous stack elements, the addBack() method is called.
Syntax
We have coloured the list items in the following syntax
<ul> <li>Item 1</li> <li>Item 2</li> <li id="mark">Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>
And the jQuery code.
$('#mark').prevAll().addBack().css('color', 'green')Algorithm
Firstly, jQuery identifies the element with the specified id and then initializes a new stack pushing it on there.
Now the second function tells us to select previous all items. So jQuery removes the current items and adds the previous list item.
Finally, we call the addBack() function which adds the third list item with the id mark onto the stack. Finally, the CSS is applied to all three elements, 1, 2, and 3.
Example 1
In the following example, we have a list of some items. Then the jQuery uses the addBack() function and demonstrates the difference of addBack() function with two lists.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>TutorialsPoint | jQuery</title>
</head>
<body>
<center>
<h4>Add the previous set of elements on the stack to the current set in jQuery</h4>
</center>
<div>
<p>Before addBack()</p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li id="mark1">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</div>
<div>
<p>After addBack()</p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li id="mark2">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
</div>
<script>
$('#mark1').prevAll().css({ color: 'blue', 'font-weight': 'bold' })
$('#mark2').prevAll().addBack().css({ color: 'blue', 'font-weight': 'bold' })
</script>
</body>
</html>Example 2
In the following example, we have two div containers and we select the previous container using the same addBack() function.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>TutorialsPoint | jQuery</title>
<style>
p,
div {
margin: 5px;
padding: 5px;
color: #ff3d3d;
}
.border {
border: 2px solid #44aaad;
}
.background {
background: #ffe260;
}
.left,
.right {
width: 40%;
float: left;
}
.right {
margin-left: 2%;
}
</style>
</head>
<body>
<center>
<h1>TutorialsPoint</h1>
<strong>How to add the previous set of elements on the stack to the current set in jQuery?</strong>
</center>
<div class="left">
<p><strong>Before<code>addBack()</code></strong></p>
<div class="before-addback">
<p>TutorialsPoint</p>
<p>jQuery</p>
</div>
</div>
<div class="right">
<p><strong>After<code>addBack()</code></strong></p>
<div class="after-addback">
<p>TutorialsPoint</p>
<p>jQuery</p>
</div>
</div>
<script>
$('.left, .right').find('div, div > p').addClass('border')
// First Part
$('.before-addback').find('p').addClass('background')
// Second Part
$('.after-addback').find('p').addBack().addClass('background')
</script>
</body>
</html>
172 Views
