DOM Traversing का परिचय
In this page:
$("selector").traversalMethod();
$("selector").children();
$("selector").parent();
$("selector").siblings();Traversing क्या है?
एक बार जब आप एक element select कर लेते हैं, traversal methods आपको एक बिल्कुल नया selector लिखने के बजाय उसके parents, children, या siblings की तरफ़ step करने देते हैं। यह अक्सर CSS selector syntax से शुरू से किसी related element की position describe करने की कोशिश करने से ज़्यादा simple और reliable है।
उदाहरण: What Is Traversing?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><p>Child paragraph</p></div>
<script>
console.log($("#box").children().length);
</script>
</body>
</html>find() इस्तेमाल करना
जब आपको किसी selected element के अंदर गहराई से matching elements चाहिए, तो find() इस्तेमाल करें, nesting depth चाहे जो भी हो उसके सभी descendants में search करते हुए। यह एक fresh selector चलाने जैसा काम करता है, लेकिन सिर्फ उन elements के अंदर search करने तक scoped है जिन्हें आपने पहले से select किया है।
उदाहरण: Using find()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><ul><li>Item</li></ul></div>
<script>
console.log($("#box").find("li").length);
</script>
</body>
</html>first() और last() इस्तेमाल करना
first() और last() किसी selection को सिर्फ उसके पहले या आख़िरी matched element तक narrow कर देते हैं, जो find() या filter() जैसी broader selection के कई results return करने के बाद उपयोगी है। दोनों एक नया jQuery object return करते हैं जिसमें ज़्यादा से ज़्यादा एक element होता है।
उदाहरण: Using first() and last()
<!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>Two</li><li>Three</li></ul>
<script>
console.log($("#list li").first().text(), $("#list li").last().text());
</script>
</body>
</html>Traversal को Chain करना
Traversal methods को साथ में chain किया जा सकता है -- उदाहरण के लिए, एक container ढूँढना, फिर उसके children, फिर उन्हें filter करना -- step by step एक precise selection बनाते हुए। यह हर intermediate step के लिए अलग selector strings से बचकर code को छोटा रखता है।
उदाहरण: Chaining Traversal
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><ul><li class="active">One</li><li>Two</li></ul></div>
<script>
console.log($("#box").find("li").filter(".active").text());
</script>
</body>
</html>Practical Traversing
DOM traversal खासतौर पर तब उपयोगी है जब elements structurally related हों लेकिन उनके पास directly select करने के लिए unique IDs या classes न हों, जैसे 'जिस भी input ने event trigger किया उसके बगल का button' ढूँढना। यह आपके code को selectors hardcode करने के बजाय असली DOM relationships follow करने देता है।
उदाहरण: Practical Traversing
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="row"><input id="field"><button>Next</button></div>
<script>
$("#field").closest(".row").find("button").on("click", function() {
console.log("Next clicked");
});
</script>
</body>
</html>- सिर्फ direct children चाहिए होने पर
.find("li")इस्तेमाल करना, क्योंकि यह सभी descendants search करता है और.children()सिर्फ एक level नीचे देखता है। - यह भूल जाना कि traversal methods नए jQuery objects return करते हैं और result को नज़रअंदाज़ करना, जैसे
$("#box").children();अपनी line पर। - किसी empty selection पर
.first()call करना और एक element की उम्मीद करना, जबकि यह बिना किसी error के एक empty jQuery object return करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: