Topics

jQuery Chaining

In jQuery, there is another robust called ‘method chaining’. The method allows the performance of multiple actions on the same set of elements, all within a single line of code.

This is made possible since most of the jQuery methods return a jQuery object that can also be used to call another method. Below is an example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Method Chaining</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Some custom styles to beautify this example */
p {
    width: 200px;
	padding: 40px 0;
	font: bold 24px sans-serif;
	text-align: center;
    background: #aaccaa;
    border: 1px solid #63a063;
    box-sizing: border-box;
}
</style>
<script>
$(document).ready(function(){
    $(".start").click(function(){
        $("p").animate({width: "100%"}).animate({fontSize: "46px"}).animate({borderWidth: 30});
    });
    $(".reset").click(function(){
        $("p").removeAttr("style");
    });
});  
</script>
</head>
<body>
    <p>Hello World!</p>
    <button type="button" class="start">Start Chaining</button>
    <button type="button" class="reset">Reset</button>
</body>
</html>

Try with example

jQuery Chaining

The example above illustrates the chaining of the three animate() method. For instance, when a user clicks the trigger button, it expands the <p> to 100% width. So, when the width change is complete the font size starts animating, and after it completes the border animation will begin.

You can as well decide to break a single line of code into multiple lines for greater readability. For instance, the sequence of methods example above could also be written this way:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Method Chaining</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* Some custom styles to beautify this example */
p {
    width: 200px;
	padding: 40px 0;
	font: bold 24px sans-serif;
	text-align: center;
    background: #aaccaa;
    border: 1px solid #63a063;
    box-sizing: border-box;
}
</style>
<script>
$(document).ready(function(){
    $(".start").click(function(){
        $("p")
            .animate({width: "100%"})
            .animate({fontSize: "46px"})
            .animate({borderWidth: 30});
    });
    $(".reset").click(function(){
        $("p").removeAttr("style");
    });
});  
</script>
</head>
<body>
    <p>Hello World!</p>
    <button type="button" class="start">Start Chaining</button>
    <button type="button" class="reset">Reset</button>
</body>
</html>

Try with example

However, some jQuery methods do not return the jQuery object. generally, setters (i.e methods that assign some value on a selection) return a jQuery object, which allows you to continue calling jQuery methods on your selection. while getters return the requested value, therefore you can't continue to call jQuery methods on the value returned by the getter.

An example of this scenario is the html() method. In the HTML, if no parameters are passed to it, the contents of the selected element are returned instead of a jQuery object.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Method Chaining Exceptions</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    .test{
		padding: 15px;
        background: yellow;
    }
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        // This will work
        $("h1").html("Hello World!").addClass("test").fadeOut(1000);
        
        // This will NOT work
        $("p").html().addClass("test");
    });
});
</script>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <button type="button">Start Chaining</button>
</body>
</html>

Try with example