Siblings को Forward Traverse करना
In this page:
$(selector).next();
$(selector).nextAll();
$(selector).nextUntil(selector);next()
.next() उसी level पर selected element के ठीक बाद आने वाला single sibling element return करता है, या अगर कोई नहीं है तो एक empty set। यह हमेशा ज़्यादा से ज़्यादा एक element return करता है, चाहे कितने भी siblings बाद में हों।
उदाहरण: next()
<!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($("#first").next().text());
</script>
</body>
</html>nextAll()
nextAll() selected element के बाद आने वाले हर sibling को select करता है, उसके parent के children के अंत तक, सिर्फ बिल्कुल अगले वाले को नहीं। यह तब उपयोगी है जब आपको किसी दिए गए point के बाद elements की पूरी series पर action लेना हो।
उदाहरण: nextAll()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>One</p><p id="start">Two</p><p>Three</p><p>Four</p>
<script>
console.log($("#start").nextAll().length);
</script>
</body>
</html>nextUntil()
nextUntil() बाद वाले siblings select करता है लेकिन अंत तक collect करने के बजाय आपके specify किए गए किसी matching element तक पहुँचने से ठीक पहले रुक जाता है। यह आपको दो known points के बीच exactly siblings लेने देता है।
उदाहरण: nextUntil()
<!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 1</p><p>Mid 2</p><p id="end">End</p>
<script>
console.log($("#start").nextUntil("#end").length);
</script>
</body>
</html>Filters के साथ next
आप next(), nextAll(), या nextUntil() को एक selector के साथ combine करके सिर्फ किसी certain type के siblings को match कर सकते हैं, जिनकी परवाह नहीं उन्हें filter out करते हुए। यह बाद में हर returned element का tag या class manually check करने से बचाता है।
उदाहरण: next with Filters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="start">Start</p><span>Not a p</span><p>Next p</p>
<script>
console.log($("#start").nextAll("p").length);
</script>
</body>
</html>Forward Traversal Practice
Forward sibling traversal step-based layouts और lists के लिए उपयोगी है, जैसे किसी multi-step form में currently active वाले के बाद के हर step को highlight करना। क्योंकि ये methods सिर्फ आगे देखते हैं, वे naturally 'इस point के बाद की हर चीज़' express करते हैं।
उदाहरण: Forward Traversal Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.step { display: inline-block; padding: 6px 10px; border: 1px solid #999; }
.step.active { background: #4a90d9; color: #fff; }
.step.upcoming { background: #ffe082; }
</style>
</head>
<body>
<div class="step active">1</div><div class="step">2</div><div class="step">3</div>
<script>
$(".step.active").nextAll(".step").addClass("upcoming");
</script>
</body>
</html>- यह उम्मीद करना कि
.next()हर बाद वाला sibling return करेगा, जबकि यह सिर्फ बिल्कुल अगले वाले को return करता है; सबके लिए.nextAll()इस्तेमाल करें। - यह मान लेना कि
.nextUntil("#stop")में#stopसे match करने वाला element शामिल है, जबकि यह उससे ठीक पहले रुकता है और उसे छोड़ देता है। - आख़िरी sibling पर
.next()call करना और फिर.addClass("x")जैसे actions chain करना, जो चुपचाप कुछ नहीं करता क्योंकि set खाली है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: