How to add the previous set of elements on the stack to the current set in jQuery?

Front End TechnologyjQueryWeb Development

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>
raja
Updated on 19-Jul-2022 13:00:27

Advertisements