← Back to jQuery Course | Chapter 2: Selectors | Lesson 6 of 10

Content वाले Filter Selectors

contains filter specific text वाले elements ढूँढता है।

In this page:

  1. Contains Text
  2. Has Descendant
  3. Empty Elements
  4. Parent Elements
  5. Content Filters को Combine करना
Syntax
javascript 
$("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

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <p>Big Sale</p><p>Regular price</p>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").text($("p:contains('Sale')").text());
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Has Descendant

':has(selector)' किसी element को सिर्फ तभी रखता है जब उसके अंदर कहीं inner selector से match होने वाला एक descendant मौजूद हो, जो containers को उनके अपने attributes के बजाय वे क्या रखते हैं इसके आधार पर ढूँढने के लिए उपयोगी है।

उदाहरण: Has Descendant

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div><span>Inner</span></div><div>No span</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").text($("div:has(span)").length);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </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

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div></div><div>Text</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").text($("div:empty").length);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>

Parent Elements

':parent' :empty का उल्टा है -- यह किसी भी ऐसे element को match करता है जिसमें child nodes या text मौजूद हो, जो placeholder या empty containers को skip करने के लिए काम का है। यह उसी काम के लिए inverse tool है, आपको सिर्फ उन containers को target करने देते हुए जिनके अंदर असल में कुछ है।

उदाहरण: Parent Elements

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div></div><div>Text</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").text($("div:parent").length);
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </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

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <li>Sale Item</li><li>Regular Item</li>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    $("#runBtn").click(function() {
      $("#output").text($("li:contains('Sale')").text());
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
    });
  </script>
</body>
</html>
Related Topics

मूल Filter Selectors · Visibility वाले Filter Selectors · Child वाले Filter Selectors · Form वाले Filter Selectors

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. यह उम्मीद करना कि :contains("sale") Big Sale text को match करेगा; यह case-sensitive है इसलिए सिर्फ :contains("Sale") match करता है।
  2. सिर्फ whitespace रखने वाले किसी element के लिए :empty को true मानना, जबकि एक space या एक child element भी इसे non-empty बना देता है।
  3. :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:

← Previous Lesson Basic Filter Selectors Next Lesson → Visibility Filter Selectors

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.