Optimizing with Chaining
In this page:
$(selector).method1().method2().method3();What is Chaining?
Chaining means calling one jQuery method right after another on the same line, which works because most jQuery methods return the same jQuery object they were called on rather than returning nothing. That returned object is what makes it possible to immediately call another method on it.
Example: What is Chaining?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#text { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<p id="text">Text</p>
<button id="btn">Run Chain</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#text").css("color", "gold").fadeOut(1000, function() {
$("#output").text("Chain finished: color set, then faded out");
});
});
$("#resetBtn").on("click", function() {
$("#text").stop(true, true).show().css("color", "white");
$("#output").text("");
});
</script>
</body>
</html>Chain Common Methods
Many of jQuery's built-in methods — like .addClass(), .css(), and .fadeIn() — return the jQuery object itself after they finish, specifically so you can continue calling more methods right after them without needing a separate variable or statement for each step.
Example: Chain Common Methods
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#text { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
.highlight { outline: 3px solid gold; }
</style>
</head>
<body>
<p id="text" style="display:none">Text</p>
<button id="btn">Run Chain</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#text").addClass("highlight").css("padding", "10px").fadeIn();
$("#output").text("Class added, padding set, fading in");
});
$("#resetBtn").on("click", function() {
$("#text").stop(true, true).hide().removeClass("highlight");
$("#output").text("");
});
</script>
</body>
</html>Chaining Traversal Methods
DOM traversal methods like .parent(), .find(), and .siblings() can also be chained, which is especially useful when you need to select related elements — like finding a specific child, then styling it — all in one connected sequence of calls.
Example: Chaining Traversal Methods
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background:steelblue; color:#1a1a1a; padding:10px; border-radius:4px; display:inline-block; margin:10px 0; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="box"><p>Child</p></div>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$("#box").find("p").css("color", "red");
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Chaining and Performance
Chaining can reduce how many times you re-select the same element, since each method in the chain operates on the result of the previous one rather than requiring a fresh selector call. It also tends to make a sequence of related operations easier to read as one coherent statement.
Example: Chaining and Performance
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#text { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<p id="text" style="display:none">Text</p>
<button id="btn">Run Chain</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#text").css("color", "gold").css("font-size", "20px").fadeIn();
$("#output").text("Color and font size set in one chain, then faded in");
});
$("#resetBtn").on("click", function() {
$("#text").stop(true, true).hide().css({"color": "white", "font-size": ""});
$("#output").text("");
});
</script>
</body>
</html>Small Chaining Project
Chaining is best kept to sequences of genuinely related operations on the same element — for very long chains, breaking each method onto its own line keeps the code readable instead of producing one dense, hard-to-scan line.
Example: Small Chaining Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#text { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
.active { outline: 3px solid lightgreen; }
</style>
</head>
<body>
<p id="text" style="display:none">Text</p>
<button id="btn">Run Chain</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#text")
.addClass("active")
.css("color", "lightgreen")
.fadeIn();
$("#output").text("Class added, color set, fading in");
});
$("#resetBtn").on("click", function() {
$("#text").stop(true, true).hide().removeClass("active").css("color", "white");
$("#output").text("");
});
</script>
</body>
</html>- Assuming every method can be chained, when getters such as
.text()or.val()with no arguments return a value, not the jQuery object. - Writing one huge chain that is hard to debug, when splitting it across lines or variables makes it readable.
- Chaining after
.find()or.parent()without realizing the selection has changed, so later methods act on different elements than expected.
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: