jQuery end() method

The end() method in jQuery is used to end the most recent filtering operation in the current chain and returns the matched set of elements to its previous state. This method is used without any argument.

The end() method is useful when jQuery is used for chaining purposes.

Syntax

This method does not accept any argument.

Now, let's understand the working of the end() method using some illustrations.

Example1

It is a simple example of using the end() method. Here, the chain will first search the paragraph elements with span and b elements inside them, and then on clicking the button, the span elements in the paragraph elements will get selected.

<html>
<head>
<title> jQuery end() method </title>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").find("span").find("b").end().css("border", "2px blue solid");
});
});
</script>

<style>
.para{
margin: 10px;
padding: 10px;
}
</style>
</head>

<body>
<h2> Welcome to the javaTpoint.com </h2>
<h3> It is an example of using the end() method. </h3>
<p> Click the below button to see the effect. </p>
<button> Click me </button>
<p class = "para"> <span> Hello <b> World. </b> </span> It is a paragraph with "span" and "b" elements. </p>
<p class = "para"> <span> Another paragraph. </b> </span>  This paragraph has a span element. </p>
<p class = "para"> <span> Another paragraph.  </b> </span> This paragraph also has a span element. </p>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example there are two methods in the chain that are the find() method and first() method, and the background colors of the paragraph elements should be changed accordingly. But on clicking the given button, the end() method will remove the last method in the chain and change the background color of paragraph elements including the span element.

<!DOCTYPE html>
<html>
<head>
<title> jQuery end() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").find("span").first().css({"background-color" : "lightblue"}).end().css({"background-color" : "yellow"});
});
});
</script>
</head>
<body>
<h2> Welcome to the javaTpoint.com </h2>
<h3> It is an example of using the end() method. </h3>
<b> Click the below button to see the effect. </b>
</br> </br>
<button> Click me </button>
<p class = "para"> Paragraph  <span> 1 with span element </span> </p>
<p class = "para"> Paragraph 2 </p>
<p class = "para"> Paragraph  <span> 3 with span element </span> </p>
<p class = "para"> Paragraph 4 </p>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -