Descendants Traverse करना
In this page:
$(selector).children(filter);
$(selector).find(selector);children()
.children() सिर्फ selected element के ठीक एक level नीचे के elements return करता है, आगे कहीं भी nested किसी चीज़ को skip करते हुए। यह parent() का descendant equivalent है -- सिर्फ एक step, आगे नहीं।
उदाहरण: children()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><p>Direct</p><div><p>Nested</p></div></div>
<script>
console.log($("#box").children().length);
</script>
</body>
</html>find()
find() किसी भी depth पर सभी descendants search करता है, सिर्फ immediate children नहीं, जो इसे सही tool बनाता है जब कोई matching element कई levels नीचे nested हो सकता है। यह एक normal selector चलाने जैसा behave करता है, लेकिन सिर्फ उन elements के अंदर scoped जिन्हें आपने पहले select किया है।
उदाहरण: find()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><p>Direct</p><div><p>Nested</p></div></div>
<script>
console.log($("#box").find("p").length);
</script>
</body>
</html>contents()
contents() text nodes और comments जैसे child nodes शामिल करता है, सिर्फ element nodes नहीं, जिन्हें children() और find() दोनों skip करते हैं। यह इसे तब उपयोगी बनाता है जब आपको specifically किसी element के अंदर raw text content inspect या manipulate करना हो।
उदाहरण: contents()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Some text<p>Paragraph</p></div>
<script>
console.log($("#box").contents().length);
</script>
</body>
</html>children और find साथ में
जब आपको सिर्फ direct child elements की परवाह हो तो children() इस्तेमाल करें, और जब कोई match structure में आगे गहराई से nested हो सकता हो तो find() इस्तेमाल करें। दोनों को एक traversal chain में combine करना आपको search को exactly उस depth तक narrow करने देता है जो आपको चाहिए।
उदाहरण: children and find Together
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><div><label>Name</label></div></form>
<script>
console.log($("#myForm").children("div").find("label").text());
</script>
</body>
</html>Descendant Practice
Descendant traversal grouped content के साथ काम करने के लिए उपयोगी है, जैसे page पर कहीं और के labels को गलती से match किए बिना किसी specific form section के अंदर हर label ढूँढना। search को किसी known container तक scope करना बहुत broad selectors से बचाता है।
उदाहरण: Descendant Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="section"><label>Email</label></div>
<script>
console.log($("#section").find("label").length);
</script>
</body>
</html>- जब target ज़्यादा गहराई से nested हो तब
.children()इस्तेमाल करना, जैसे$("#box").children("p")किसी inner<div>के अंदर<p>तक पहुँचने की उम्मीद में;.children()सिर्फ एक level नीचे देखता है, इसलिए.find("p")इस्तेमाल करें। - यह उम्मीद करना कि
.children()या.find()text nodes या comments return करेंगे, जबकि सिर्फ.contents()उन्हें शामिल करता है। - बिना किसी argument के
.find()call करना और सभी descendants की उम्मीद करना, जबकि.find()को एक selector चाहिए (सब कुछ match करने के लिए.find("*")इस्तेमाल करें)।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: