want to show / hide only the specified elements in jQuery iteration
<p>I have the following code where I want to show / hide different text based upon a mouseover. I am using a data-global-id value and want to iterate through the children of the item-list and hide all but specified value (item-1 for data-global-id=1 for example):  </p>

<pre><code>&lt;script&gt;
  $(document).ready(function() {
    $('.item-list').hide();
    $('.h').mouseover(function() {
      // need to hide everything but the 1 or 2
      var id = $(this).data('global-id');
      var chil=$('.item-list').children();
      $.each(chil, function(i,v){
        alert(i);
        console.log(v);
      });
    });
  });
&lt;/script&gt;

&lt;style&gt;
.h{
  width: 200px;
  border: 1px solid red;
}
&lt;/style&gt;

&lt;ul&gt;
    &lt;li&gt;&lt;div class='h' data-global-id="1"&gt;Client 1&lt;/div&gt;&lt;/li&gt;
    &lt;li&gt;&lt;div class='h' data-global-id="2"&gt;Client 2&lt;/div&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;ul class="item-list"&gt;
    &lt;li class="item-1"&gt;
        Lorem ipsum jtjtjt, etc...
    &lt;/li&gt;
    &lt;li class="item-2"&gt;
        Lorem ipsum, etc...
    &lt;/li&gt;                      
&lt;/ul&gt;
</code></pre>

<p>How would I specify in the each loop to hide everything and just show the item+data-global-id value? Is there a better / easier way to do this?</p>

<p>thx</p>
