manage sibling li elements from span in jQuery
<p>here is my html ( all li and span comes dynamically )</p>

<pre><code>&lt;div id="VMScrollBoth1" class="sliderGallery"&gt;
        &lt;ul&gt;
            &lt;li class="VMScrollBoth handle6"&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;img src="imagex.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
            &lt;li class="VMScrollBoth handle6"&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;img src="imagex2.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
            &lt;li class="VMScrollBoth handle6"&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;img src="imagex3.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
            &lt;li class="VMScrollBoth handle7"&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;img src="imagex4.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
            &lt;li class="VMScrollBoth handle7"&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;img src="imagex5.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
            &lt;li class="VMScrollBoth handle8"&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;img src="imagex6.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
            &lt;li class="VMScrollBoth handle8"&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;img src="imagex7.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
            &lt;li class="VMScrollBoth handle8"&gt;&lt;span&gt;&lt;a href="#"&gt;&lt;img src="imagex.png"&gt;&lt;/a&gt;&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="slider ui-slider"&gt;
            &lt;a href="javascript:void(0)"&gt; &lt;div class="handle"&gt;&lt;/div&gt;&lt;/a&gt;
            &lt;span class="slider-lbl1" id="handle8"&gt;SIENNA&lt;/span&gt;
            &lt;span class="slider-lbl1" id="handle6"&gt;CARRIE&lt;/span&gt;
            &lt;span class="slider-lbl1" id="handle7"&gt;ISABELLE&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>what i want is . On page load all li elements shoud be display but when i click on span having id <code>handle8</code> then only that li element would be display which have class <code>handle8</code>, rest of all li elements shoud be hidden</p>

<p>i write below code:</p>

<pre><code>&lt;style&gt;
.gayab {display:none }
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
 jQuery('.slider-lbl1').live('click',function () { 
      var catID = jQuery(this).attr('id');
      console.log(catID);
      jQuery(this).parent().parent().children('ul').children('li').filter(
         function(index) { 
             if((jQuery(this).hasClass(catID))){
                   jQuery(this).removeClass('gayab');
           } else {
                   jQuery(this).addClass('gayab');
           }
        })
     })
&lt;/script&gt;
</code></pre>

<p>it's working fine on FF but not working in IE ( i have IE7), please first optimize my code, i know this is very complex way to use jQuery &amp; also tell me how to fix ot in IE<br>
Thanks<br>
<strong>UPDATE:</strong> <code>VMScrollBoth1</code> is also coming dynamicaly, it can be <code>VMScrollBoth2</code> or <code>VMScrollBoth99</code></p>
