end() और addBack() से Chains को Revert करना
In this page:
$(selector).find(child).action().end().action();
$(selector).find(child).addBack().action();end() इस्तेमाल करना
.end() call करना chain में सबसे हाल का filtering या traversal step undo कर देता है, उससे ठीक पहले jQuery के पास मौजूद selection को restore करते हुए। यह आपको एक single chain में एक branch पर काम करने और फिर बिना अलग variable बनाए दूसरे पर वापस जाने देता है।
उदाहरण: Using end()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li class="a">One</li><li>Two</li></ul>
<script>
const result = $("#list").find(".a").css("color", "red").end().find("li").length;
console.log(result);
</script>
</body>
</html>end() के साथ Chaining
end() तब उपयोगी है जब एक लंबी chain को related elements के कई levels पर काम करना हो -- एक child ढूंढो, उस पर action लो, end() से parent पर वापस जाओ, फिर एक अलग child ढूंढो। यह पूरी chain को readable और एक single statement में रखता है।
उदाहरण: Chaining with end()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><p class="a">A</p><span class="b">B</span></div>
<script>
$("#box").find(".a").css("color", "red").end().find(".b").css("color", "blue");
</script>
</body>
</html>addBack() इस्तेमाल करना
addBack() पिछली selection को पूरी तरह discard करने के बजाय current set में वापस add कर देता है, दोनों selections को एक साथ combine करते हुए। यह end() से अलग है, जो current set को पिछले से पूरी तरह replace कर देता है।
उदाहरण: Using addBack()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>One</li><li class="a">Two</li></ul>
<script>
const set = $("#list").find("li").filter(".a").addBack();
console.log(set.length);
</script>
</body>
</html>end() बनाम addBack()
end() पिछली selection पर वापस move करता है, chain में last traversal या filter step ने जो भी add किया था उसे drop करते हुए। addBack() इसके बजाय पिछली selection को current selection के साथ merge कर देता है, दोनों sets को एक साथ रखते हुए।
उदाहरण: end() vs addBack()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>One</li><li class="a">Two</li></ul>
<script>
console.log("end():", $("#list").find("li").filter(".a").end().length);
console.log("addBack():", $("#list").find("li").filter(".a").addBack().length);
</script>
</body>
</html>Traversal Chain Practice
ये methods सिर्फ किसी earlier selection को याद रखने के लिए repeated variable assignments से बचकर complex traversal chains को readable रखने में मदद करते हैं। एक लंबी chain end() और addBack() के साथ अक्सर separate variables में तोड़े गए बराबर code से ज़्यादा clear रहती है।
उदाहरण: Traversal Chain Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><p class="a">A</p></div>
<script>
$("#box").find(".a").css("color", "red").end().css("border", "1px solid black");
</script>
</body>
</html>- यह उम्मीद करना कि
.end()हर पहले वाले step को undo कर देगा, जबकि यह chain में सिर्फ single सबसे हाल के filter या traversal को revert करता है। .addClass()जैसे किसी method के बाद.end()इस्तेमाल करना जो selection नहीं बदलता, और intended से एक step ज़्यादा पीछे पहुँच जाना।.addBack()को.end()के साथ confuse करना;.addBack()पिछले set को current में merge करता है, जबकि.end()current set को पिछले से replace कर देता है।
- DOM traversing एक element से related elements की ओर move करता है: ancestors, descendants, और siblings।
- Filtering, is(), और has() elements के sets को narrow और test करते हैं।
- each(), mapping, और addBack() के साथ end() matches पर iterate करते हैं और jQuery chains control करते हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: