jQuery end() function example

In this post, we are going to discuss about one of the rarely used but a powerful technique in jQuery. jQuery API provides a powerful technique called end(), which is a very handy method while writing jQuery applications.

jQuery end

The end() method ends the most recent filtering operation in the current chain, and return the matched set of elements to its previous state.This method does not take any arguments.

Here is the general syntax for using end():

jQuery end() example

Following example demonstrates the jQuery end() usage.

In this example, look at this script section which performs the intended operations in the above code.

The operations start with a button click. At first, find() method is used to get the span element having id=span1 and changes its color to yellow. Then an end() method is called which pops out the last filtering options on the div from the stack. Now it is free for another operation. Then it finds span2 and changes the color to red. Again, end method is called to free up the stack. Finally, we animate div with the height attribute.

It would have looked like the below scripts to carry out the above operations without the end() method.


This is what jQuery end() method do when you manipulate a single element like div used in the above code. Therefore, try using end method from here on. You can now get rid of the unwanted lines of code from your application by using end() method.

You can try it yourself by clicking on the below button.

That’s all for now and you will see some interesting tricks in jQuery in the coming posts.

By admin

Leave a Reply

%d bloggers like this: