Ancestors Traverse करना
In this page:
$(selector).parent();
$(selector).parents(filter);
$(selector).closest(selector);parent()
.parent() DOM tree में exactly एक level ऊपर जाता है और हर selected element का immediate parent return करता है। यह कभी भी एक level से ज़्यादा ऊपर नहीं देखता, यहाँ तक कि कोई match न हो तब भी -- यह बस किसी grandparent तक skip नहीं करेगा।
उदाहरण: parent()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="grandparent"><div id="parent"><p id="child">Text</p></div></div>
<script>
console.log($("#child").parent().attr("id"));
</script>
</body>
</html>parents()
parents() document root तक पूरे रास्ते सभी matching ancestors select करता है, सिर्फ immediate parent नहीं। आप optionally एक selector pass कर सकते हैं यह filter करने के लिए कि उस पूरी chain में से कौन-से ancestors शामिल हों।
उदाहरण: parents()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="grandparent"><div id="parent"><p id="child">Text</p></div></div>
<script>
console.log($("#child").parents().length);
</script>
</body>
</html>parentsUntil()
parentsUntil() ऊपर की तरफ़ travel करते हुए ancestors collect करता है, लेकिन root तक जाने के बजाय आपके specify किए गए किसी chosen ancestor तक पहुँचने से ठीक पहले रुक जाता है। यह तब उपयोगी है जब आपको exactly पता हो कि walk कहाँ रुकनी चाहिए, जैसे किसी specific container तक।
उदाहरण: parentsUntil()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="stop"><div id="mid"><p id="child">Text</p></div></div>
<script>
console.log($("#child").parentsUntil("#stop").length);
</script>
</body>
</html>closest()
closest() खुद element से शुरू होकर ऊपर की तरफ़ move करते हुए सबसे नज़दीकी matching ancestor ढूँढता है, जो पहला match मिलते ही रुक जाता है। parents() के उलट, यह एक match मिलते ही रुक जाता है, हर matching ancestor collect करने के बजाय।
उदाहरण: closest()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="card"><p id="child">Text</p></div>
<script>
console.log($("#child").closest(".card").length);
</script>
</body>
</html>Ancestor Practice
Ancestor methods किसी container को उसके अंदर clicked या selected element के आधार पर बदलने के लिए उपयोगी हैं, जैसे किसी button के अंदर click होने पर उसे enclose करने वाला list item ढूँढना। खासतौर पर closest() event-delegation patterns में इसके लिए standard tool है।
उदाहरण: Ancestor Practice
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li class="task"><button id="del">Delete</button></li>
<script>
$("#del").on("click", function() {
$(this).closest(".task").remove();
});
</script>
</body>
</html>- सिर्फ direct parent चाहिए होने पर
.parents()इस्तेमाल करना, क्योंकि यह<html>तक हर ancestor return करता है;.parent()एक level देता है। - यह मान लेना कि
.parentsUntil("#top")में#topशामिल है, जबकि यह उससे ठीक पहले रुकता है। - यह उम्मीद करना कि
.parent()एक certain class वाला ancestor return करेगा;.closest(".class")वह method है जो ऊपर की तरफ़ search करता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: