Content Filter Selectors
In this page:
$("selector:contains('text')")
$("selector:empty")
$("selector:has(childSelector)")
$("selector:parent")Contains Text
:contains() filter हर element का rendered text check करता है और सिर्फ उन्हें रखता है जिनमें आपके pass किया गया exact substring हो। match case-sensitive है, इसलिए capitalization को exactly match करना चाहिए।
उदाहरण: Contains Text
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Big Sale</p><p>Regular price</p>
<script>
console.log($("p:contains('Sale')").text());
</script>
</body>
</html>Has Descendant
':has(selector)' किसी element को सिर्फ तभी रखता है जब उसके अंदर कहीं inner selector से match होने वाला एक descendant मौजूद हो, जो containers को उनके अपने attributes के बजाय वे क्या रखते हैं इसके आधार पर ढूँढने के लिए उपयोगी है।
उदाहरण: Has Descendant
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div><span>Inner</span></div><div>No span</div>
<script>
console.log($("div:has(span)").length);
</script>
</body>
</html>Empty Elements
':empty' उन elements को match करता है जिनमें कोई child nodes और बिल्कुल कोई text content नहीं है -- एक single space की whitespace भी किसी element को इस filter से disqualify कर देती है। यह filter अक्सर placeholder containers को detect और hide करने के लिए इस्तेमाल होता है जो अभी असली content से populated नहीं हुए।
उदाहरण: Empty Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div></div><div>Text</div>
<script>
console.log($("div:empty").length);
</script>
</body>
</html>Parent Elements
':parent' :empty का उल्टा है -- यह किसी भी ऐसे element को match करता है जिसमें child nodes या text मौजूद हो, जो placeholder या empty containers को skip करने के लिए काम का है। यह उसी काम के लिए inverse tool है, आपको सिर्फ उन containers को target करने देते हुए जिनके अंदर असल में कुछ है।
उदाहरण: Parent Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div></div><div>Text</div>
<script>
console.log($("div:parent").length);
</script>
</body>
</html>Content Filters को Combine करना
Content filters किसी भी दूसरे filter की तरह ही normal selectors पर chain होते हैं, इसलिए 'li:contains("Sale")' पहले list items तक narrow करता है, फिर एक ही expression में उनके text से filter करता है। इस chaining order को समझना efficient selectors लिखने की कुंजी है जो ज़रूरत से ज़्यादा page search न करें।
उदाहरण: Combine Content Filters
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<li>Sale Item</li><li>Regular Item</li>
<script>
console.log($("li:contains('Sale')").text());
</script>
</body>
</html>- यह उम्मीद करना कि
:contains("sale")Big Saletext को match करेगा; यह case-sensitive है इसलिए सिर्फ:contains("Sale")match करता है। - सिर्फ whitespace रखने वाले किसी element के लिए
:emptyको true मानना, जबकि एक space या एक child element भी इसे non-empty बना देता है। :has()और:contains()को mix up करना, text search करने के लिए:has("text")इस्तेमाल करना जबकि:hasकिसी descendant element के लिए एक selector लेता है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: