Skip to content
Related Articles

Related Articles

How to find span elements inside paragraph and reverts the selection back in jQuery ?
  • Last Updated : 22 Apr, 2021

The purpose of this article is to find the span elements inside the paragraph and reverts the selection back using Jquery. In simple wording, we just have to find the span element. After selecting the span element we have to end the most recent operation i.e selecting the span element and then apply some CSS styling to show the reverting the selection operation was done successfully.

Approach:

  • Create the HTML page with the span element within the paragraph element.
  • Using .find() method find all the span element.
  • Now revert to the operation of finding the span element.
  • At the end apply some CSS to show that the operation has been reverted.

Method Used:

  1. .Find() method: This method is used to returns descendant elements of the selected element.
  2. .end() method: This method is used to revert the most recent destructive operation, changing the set of matched elements to its previous state right before the destructive operation
  3. .css() method: This method is used to sets or returns one or more style properties for the selected elements.

Example: 

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width" />
    <style>
      body {
        text-align: center;
        font-size: 30px;
      }
      p {
        margin: 10px;
        padding: 10px;
      }
      button {
        background-color: #4caf50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1 style="color: green">GeeksForGeeks</h1>
  
    <p>
      <span>This part is in the span element.</span
       This part is not in the
      span element.
    </p>
  
    <button>Click to see the effect</button>
    <script>
      $("button").click(function () {
        $("p").find("span").end()
              .css("background-color", "lightgreen");
      });
    </script>
  </body>
</html>

Output: 

Explanation: The first operation was to find the span element within the paragraph element. The second operation was to revert the selection operation. After that CSS styling is not done on the span element rather it was done on the whole paragraph element. 




My Personal Notes arrow_drop_up
Recommended Articles
Page :