title: How do I select an element having a specific child using jQuery?
body: <p>Assume the following html snippet...</p>
  
  <p><strong>HTML Example</strong></p>
  
  <pre><code>&lt;div class="panel"&gt;
      &lt;input type="hidden" class="id" value="1"&gt;&lt;/input&gt;
      &lt;div class="collection"&gt;
          &lt;div&gt;
              &lt;input type="hidden" class="id" value="1"&gt;&lt;/input&gt;
              &lt;input type="text" value="hello world"&gt;&lt;/input&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="hidden" class="id" value="2"&gt;&lt;/input&gt;
              &lt;input type="text" value="goodbye moon"&gt;&lt;/input&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel"&gt;
      &lt;input type="hidden" class="id" value="2"&gt;&lt;/input&gt;
      &lt;div class="collection"&gt;
          &lt;div&gt;
              &lt;input type="hidden" class="id" value="3"&gt;&lt;/input&gt;
              &lt;input type="text" value="some text"&gt;&lt;/input&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="hidden" class="id" value="4"&gt;&lt;/input&gt;
              &lt;input type="text" value="whatever"&gt;&lt;/input&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How would I craft a jQuery selector to select the div with class 'panel' where the child element is a hidden input with class 'id' and value of 2?</p>
  
  <p>My current attempt selects the child element, not the parent.  I could just call to get the parent now that I have the child, but I am looking for a selector that gets me the parent the first time around.</p>
  
  <p><strong>Selector that gets the child...</strong></p>
  
  <pre><code>var element = $(".panel &gt; input[type='hidden'][value='2'].id");
  </code></pre>
  
  <p>I also tried <code>:has</code> but it selected both panels because it selects on all descendants, not just the child and div  'colection' has a hidden input with class 'id' and value 2 on the first panel.</p>
  
  <p>Here is my complete testing example...</p>
  
  <p><strong>Complete Testing Example:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function () {
    var element = $(".panel &gt; input[type='hidden'][value='2'].id");
    var elements = $(".panel").has("input[type='hidden'][value='2'].id");
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   &lt;head&gt;
    &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div class="panel"&gt;
        &lt;input type="hidden" class="id" value="1"&gt;&lt;/input&gt;
        &lt;div class="collection"&gt;
            &lt;div&gt;
                &lt;input type="hidden" class="id" value="1"&gt;&lt;/input&gt;
                &lt;input type="text" value="hello world"&gt;&lt;/input&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;input type="hidden" class="id" value="2"&gt;&lt;/input&gt;
                &lt;input type="text" value="goodbye moon"&gt;&lt;/input&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel"&gt;
        &lt;input type="hidden" class="id" value="2"&gt;&lt;/input&gt;
        &lt;div class="collection"&gt;
            &lt;div&gt;
                &lt;input type="hidden" class="id" value="3"&gt;&lt;/input&gt;
                &lt;input type="text" value="some text"&gt;&lt;/input&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;input type="hidden" class="id" value="4"&gt;&lt;/input&gt;
                &lt;input type="text" value="whatever"&gt;&lt;/input&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>