Hierarchy Selectors
In this page:
$("ancestor descendant")
$("parent > child")
$("prev + next")
$("prev ~ siblings")Descendant Selector
एक space से अलग किए गए दो selectors लिखना पहले वाले के अंदर कहीं भी nested हर element ढूँढता है, चाहे वह कितने भी levels गहराई से बैठा हो। क्योंकि यह किसी भी depth पर search करता है, यह किसी बड़े page पर hierarchy selectors में सबसे कम specific और potentially सबसे धीमा है।
उदाहरण: Descendant Selector
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div><ul><li>Item</li></ul></div>
<script>
console.log($("div li").length);
</script>
</body>
</html>Child Selector
दो selectors के बीच एक greater-than sign, जैसे 'ul > li', match को सिर्फ direct children तक सीमित करता है, grandchildren के अंदर या उससे आगे ज़्यादा गहराई से nested किसी भी element को नज़रअंदाज़ करते हुए।
उदाहरण: Child Selector
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul><li>A<ul><li>Nested</li></ul></li></ul>
<script>
console.log($("ul > li").length);
</script>
</body>
</html>Adjacent Sibling
दो selectors के बीच एक plus sign, जैसे 'h2 + p', सिर्फ उस single element को match करता है जो एक sibling के रूप में पहले वाले के ठीक बाद आता है, sibling list में आगे की किसी भी चीज़ को skip करते हुए।
उदाहरण: Adjacent Sibling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h2>Heading</h2><p>First</p><p>Second</p>
<script>
console.log($("h2 + p").text());
</script>
</body>
</html>General Sibling
दो selectors के बीच एक tilde, जैसे 'h2 ~ p', उसी parent के साथ हर बाद वाले sibling को match करता है, सिर्फ अगले वाले को नहीं -- plus-sign adjacent-sibling selector से broader। यह तब उपयोगी है जब किसी specific marker element के बाद कई sibling elements को exact position चाहे जो भी हो एक जैसा treatment चाहिए।
उदाहरण: General Sibling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h2>Heading</h2><p>First</p><p>Second</p>
<script>
console.log($("h2 ~ p").length);
</script>
</body>
</html>Hierarchy Combine करना
hierarchy selectors को combine करना, जैसे 'div > ul li.active', आपको precise, multi-level queries बनाने देता है जो बिना over- या under-select किए exactly वे elements pinpoint करती हैं जिनकी आपको ज़रूरत है।
उदाहरण: Combine Hierarchy
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div><ul><li>Off</li><li class="active">On</li></ul></div>
<script>
console.log($("div > ul li.active").text());
</script>
</body>
</html>- descendant selector
div liइस्तेमाल करना जब आपका मतलब सिर्फ direct children से था, इसलिए किसी<li>के अंदर nested lists भी match हो जाती हैं;ul > lidirect-child form है। - यह सोचना कि
h2 + pheading के बाद हर paragraph select करता है, जबकि यह सिर्फ उसके ठीक बगल वाले को match करता है;h2 ~ pसभी बाद वाले siblings select करता है। - यह उम्मीद करना कि sibling selectors पीछे की तरफ़ या दूसरे parents में देखेंगे, लेकिन
+और~सिर्फ एक ही parent share करने वाले बाद के siblings को match करते हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: