Siblings को Backward Traverse करना
In this page:
$(selector).prev();
$(selector).prevAll();
$(selector).prevUntil(selector);prev()
.prev() DOM में उसी level पर selected element से ठीक पहले बैठा sibling element return करता है। next() की तरह ही, यह हमेशा सिर्फ एक element return करता है, ठीक पहले वाला, आगे कभी नहीं।
उदाहरण: prev()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="first">First</p><p id="second">Second</p>
<script>
console.log($("#second").prev().text());
</script>
</body>
</html>prevAll()
prevAll() selected element से पहले आने वाले हर sibling को select करता है, उसके parent के children की शुरुआत तक। यह nextAll() का mirror image है, बाद की हर चीज़ के बजाय पहले की हर चीज़ collect करते हुए।
उदाहरण: prevAll()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>One</p><p>Two</p><p id="end">Three</p>
<script>
console.log($("#end").prevAll().length);
</script>
</body>
</html>prevUntil()
prevUntil() पहले वाले siblings select करता है लेकिन शुरुआत तक collect करने के बजाय आपके specify किए गए किसी matching element तक पहुँचने से ठीक पहले रुक जाता है। यह आपको exactly किस range के पहले वाले siblings मिलें इस पर precise control देता है।
उदाहरण: prevUntil()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="start">Start</p><p>Mid</p><p id="end">End</p>
<script>
console.log($("#end").prevUntil("#start").length);
</script>
</body>
</html>Filters के साथ prev
Backward traversal को उसी तरह एक selector के साथ combine किया जा सकता है जैसे forward traversal को, पहले वाले siblings को सिर्फ किसी particular tag या class से match करने वालों तक filter करते हुए। यह बाद में extra filtering logic से बचाता है।
उदाहरण: prev with Filters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<span>Not a p</span><p>A paragraph</p><p id="end">End</p>
<script>
console.log($("#end").prevAll("p").length);
</script>
</body>
</html>Backward Traversal Practice
Backward traversal तब उपयोगी है जब किसी बाद वाले element को किसी पहले वाले को control या reference करना हो, जैसे कोई 'clear form' button उससे पहले के हर input को reset करना। यह आपके code को सीधे 'इस point से पहले की हर चीज़' express करने देता है।
उदाहरण: Backward Traversal Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input value="a"><input value="b"><button id="clear">Clear Form</button>
<script>
$("#clear").on("click", function() {
$(this).prevAll("input").val("");
});
</script>
</body>
</html>- यह मान लेना कि
.prevAll()elements को document order में return करता है, जबकि यह उन्हें reverse order में return करता है, सबसे नज़दीकी sibling से शुरू करते हुए। - किसी ऐसे sibling तक पहुँचने के लिए
.prev()इस्तेमाल करना जो element से सीधे पहले नहीं है, यह उम्मीद करते हुए कि यह दूसरों को skip कर देगा; यह सिर्फ ठीक पहले वाले sibling को return करता है। - यह सोचना कि
.prevUntil("#start")में#startelement शामिल है, जबकि यह उससे पहले रुकता है और उसे exclude करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: