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:
- .Find() method: This method is used to returns descendant elements of the selected element.
- .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
- .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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...