Databases
StackOverflow2013
Postsdbo
POmanage sibling li elements from span in jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmanage sibling li elements from span in jQuery
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload