manage sibling li elements from span in jQuery

Question

Hello All,

here is my html ( all li and span comes dynamically )

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

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

i write below code:

<style>
.gayab {display:none }
</style>
<script type="text/javascript">
 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');
           }
        })
     })
</script>

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 & also tell me how to fix ot in IE
Thanks
UPDATE: VMScrollBoth1 is also coming dynamicaly, it can be VMScrollBoth2 or VMScrollBoth99

Answer 1

You can shorten it down to this:

jQuery('.slider-lbl1').live('click',function () {
  $("#VMScrollBoth1 li:not(." + this.id +")").hide();
})​;​

You can give it a try here, this takes the clicked element's id, and finds any <li> elements under #VMScrollBoth1 that do :not() have that .class, and .hide()s them.

.hide()/.show() are easier methods than having a class just for display: none; :)

Here's also a version that works for future clicks:

jQuery('.slider-lbl1').live('click',function () {
  $("#VMScrollBoth1 li").show().not("." + this.id).hide();
});​

This shows all the <li> elements then filters again on each click, allowing you to click multiple handles and the visible list updates each time, you can try it here.

Answer 2

Two quick points (I'd write a comment instead of an answer, but I can't yet do that):

1. "console" breaks your IE7 javascript,
2. in case you copied your code into your question as is, ".gayab {di*a*play:none }" has a typo in it, di*A*play instead of di*S*play.

...but see the other answers instead. :)

Answer 3

Here is an easier way to do, and safer as it does not use relative paths:

jQuery('.slider-lbl1').live('click',function () {
    var handle = this.id;
    $('.VMScrollBoth').each(function() {
        $(this).toggle($(this).hasClass(handle));
    });
});