title: hide all child of ul except one that has div with specific class jquery
body: <p>I want to hide all children of <code>ul</code> except one that has <code>div</code> with a specific
  class. I want when clicking on an anchor tag with class <code>h4</code> hide all <code>li</code> elements except any <code>li</code> that contains a <code>div</code> with class <code>header4</code>. My view has a <code>ul</code> with a <code>foreach</code> loop for <code>li</code> inside.</p>
  
  <pre><code>&lt;ul id="itemContainer" class="posts"&gt;
      @foreach (var item in Model) {
      &lt;li class="first"&gt;
          &lt;div class="date"&gt;
          &lt;/div&gt;
          if (condition) {
          &lt;div class="gallery-container arrow header1"&gt;
          &lt;/div&gt;
          } if (condition) {
          &lt;div class="gallery-container arrow header2"&gt;
          &lt;/div&gt;
          } if (condition) {
          &lt;div class="gallery-container arrow header3"&gt;
          &lt;/div&gt;
          } if (condition) {
          &lt;div class="gallery-container arrow header4"&gt;
          &lt;/div&gt;
          }
      &lt;/li&gt;
      }
  &lt;/ul&gt;
  &lt;li&gt;&lt;a href="javascript:void(0);" class="h4"&gt;click&lt;/a&gt;&lt;/li&gt;
  &lt;script&gt;
      $(document).ready(function() {
          $('.h4').click(function() {
  
              alert("1");
              $("#itemContainer").children().hide();
              $('.header4').show();
          })
      });
  &lt;/script&gt;
  </code></pre>