jQuery end() function example

Filed Under: jQuery

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():

  • operations.end()

jQuery end() example

Following example demonstrates the jQuery end() usage.


<!doctype html>
<html>
<head>
<title>jQuery Traversing end</title>
<style>
    .highlight{
       background: yellow;
     }
   
    div{
      display: block;
      border: 3px solid black;
      color: red;
      padding: 5px;
      margin: 25px;
      width:250px;
     }
    span{
      display: block;
      border: 3px solid green;
      color: black;
      padding: 5px;
      margin: 25px;
      width:200px;
     }
</style>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
<h2>jQuery find() demo</h2>
<button>Click</button>
<div>div
<span id="span1">Span 1</span>
<span id="span2">Span2</span>
</div>
<script>
$("button").click(function(){
$( "div" ).find( "#span1" ).addClass("highlight").end()
           .find("#span2") .css("background-color", "red").end()
          .animate({height: 250});
});
</script>
</body>
</html>

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


<script>
$("button").click(function(){
$( "div" ).find( "#span1" ).addClass("highlight").end()
           .find("#span2") .css("background-color", "red").end()
          .animate({height: 250});
});
</script>

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.


<script>
$("button").click(function(){
 var div = $( "div" );
    div.find( "#span1" ).addClass("highlight");
     div.find("#span2") .css("background-color", "red");
       div.animate({height: 250});
});
</script>

OR


<script>
$("button").click(function(){
    $( "div" ).find( "#span1" ).addClass("highlight");
     $( "div" ).find("#span2") .css("background-color", "red");
       $( "div" ).animate({height: 250});
});
</script>

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages