Chaining से Optimize करना
Chaining का मतलब है same selected element पर कई jQuery methods call करना। यह code को छोटा बनाता है और repeated selections से बचाता है।
In this page:
Syntax
$(selector).method1().method2().method3();Chaining क्या है?
Chaining का मतलब है same line पर एक के बाद एक jQuery method call करना, जो काम करता है क्योंकि ज़्यादातर jQuery methods उसी jQuery object को return करते हैं।
उदाहरण: 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>Common Methods Chain करना
jQuery के कई built-in methods — जैसे .addClass(), .css(), और .fadeIn() — खत्म होने के बाद jQuery object खुद return करते हैं, खासतौर पर ताकि आप c।
उदाहरण: 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>Traversal Methods Chain करना
DOM traversal methods जैसे .parent(), .find(), और .siblings() को भी chain किया जा सकता है, जो खासतौर पर तब उपयोगी है जब आपको related elements select करने हों।
उदाहरण: 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 और Performance
Chaining यह कम कर सकता है कि आप same element को कितनी बार re-select करते हैं, क्योंकि chain का हर method पिछले वाले के result पर operate करता है।
उदाहरण: 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>एक छोटा Chaining Project
Chaining को same element पर genuinely related operations की sequences तक ही रखना best है — बहुत लंबी chains के लिए, हर method को अपनी line पर तोड़ना।
उदाहरण: 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>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- यह मान लेना कि हर method chain हो सकता है, जबकि बिना arguments वाले getters जैसे
.text()या.val()एक value return करते हैं, jQuery object नहीं। - एक बहुत बड़ी chain लिखना जिसे debug करना मुश्किल हो, जबकि इसे lines या variables में तोड़ना readable बनाता है।
.find()या.parent()के बाद chain करना यह realize किए बिना कि selection बदल गया है, ताकि बाद के methods उम्मीद से अलग elements पर act करें।
🔒
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: