title: JQuery Selector for hasClass or Previously Clicked Element
body: <p>Basically I am combining a filter/sort script with a gallery/thumbnail script. Everything works well apart from changing the opacity of the elements when clicking on the new image. ie. Click on new thumbnail, fades to 1.0, old one fades to 0.3.</p>
  
  <p>I can solve one problem only to have another take place.</p>
  
  <p>For example:</p>
  
  <p>I can get the previous element to fade back to 0.3 opacity and the new element to fade in to 1.0, but only by selecting the entire list using: <code>#thumbs ul.thumbs li</code>. This works perfectly but when the filter kicks in and you have only 3/9 list items showing, when you click on another thumbnail, everything fades back to 0.3, causing all of the thumbnails to reappear.</p>
  
  <p>I was thinking of using a counter to add a class to the clicked item, which then if that class is applied, the element will fade back to 0.3 and the class is then removed. Something like this.</p>
  
  <pre><code>$("#thumbs ul.thumbs li").click( function()
  {
      if($("#thumbs ul.thumbs li").hasClass("counter")) {
          $("#thumbs ul.thumbs li").fadeTo('fast', 0.3);
          $(this).removeClass("counter");
      }
      $(this).addClass("counter");
      $(this).fadeTo('fast', 1.0);
  });
  </code></pre>
  
  <p>I know exactly where my problem is. Trying to fade the list back to <code>0.3</code>. I cannot think of the selector to use that will pick that one class that has the counter  and then fade it back. I tried <code>this</code> but of course that applies to the clicked item. </p>
  
  <p>I want to choose the element that has the counter style applied <code>#thumbs ul.thumbs li .counter</code> and then fade that particular items <code>li</code> element back to <code>0.3</code>.</p>
  
  <p>The reason why it has to be this is the gallery/thumbnail script forces the opacity on the elements <code>li</code>. Now I have tried to work my way through to find that but I cannot, so I thought to write a script to overwrite it. </p>
  
  <p>As I mentioned above, I got it to work without taking the filter into account.</p>
  
  <p>Another option I was thinking of was trying to find the previously clicked item and applying the opacity to that list item. </p>
  
  <p>I am using Galleriffic Example 2 - Thumbnails and Gallery along with MixitUp.</p>
  
  <p>I knew there would be incompatibilities but I have gotten it all to work apart from the opacity. So so so so close now. </p>
  
  <p>Any help would be greatly appreciated. I can provide more info if needed.</p>
  
  <p>I believe all I am missing is the correct selector. I am just at that stage where I cannot get myself out of the hole that is preventing me from thinking of the right selector. I am so close but I just cannot think of it. I know it will end up being something simple and I will kick myself for writing all of this. The DOM is frustrating me. Trying to get the parents and siblings all correct whilst following the gallery/thumbnails code. </p>
  
  <p>Cheers</p>
  
  <p>EDIT:</p>
  
  <p>Using Jack Donnelly's method below, I was able to fix the problems I was facing. However, the thumbnail was still being added to the list even if it did not have a matching filter. This works but I would like to make it so that I dont have to call the code each time for each filter:</p>
  
  <pre><code>if ($("#filter-controls li.web").hasClass("filter-selected")){
      if ($(this).hasClass("web")){
          // Select our `li` element with the `.counter` class
          var $counter = $("#thumbs ul.thumbs li.counter");
          // Check whether this element exists
          if ($counter.length &gt; 0) {
              // If it does exist, make it fade out
              $counter.fadeTo('fast', 0.3);
              // Finally, remove the counter class from our counter element
              $counter.removeClass("counter");
          }
          $(this).addClass("counter");
          $(this).fadeTo('fast', 1.0);
      }
  }
  </code></pre>
  
  <p>I have come across this below but am having trouble implementing it with my existing code:</p>
  
  <p><a href="https://stackoverflow.com/questions/9603814/jquery-how-to-check-if-two-elements-have-the-same-class">jQuery: How to check if two elements have the same class</a></p>
  
  <p>EDIT: I ended up fixing this by removing the fadeto and using a class instead. Although I dont like using <code>!important</code>, it is really the only way without a massive headache in this case.</p>
  
  <pre><code>$("#thumbs ul.thumbs li").click( function()
  {
      var $counter = $("#thumbs ul.thumbs li.counter");
      // Check whether this element exists
      if ($counter.length &gt; 0) {
          $counter.removeClass("counter");
      }
      $(this).addClass("counter");
  });
  </code></pre>
  
  <p>CSS has this: </p>
  
  <pre><code>.counter {
      opacity: 1.0 !important;
  }
  </code></pre>
  
  <p>This is nice and simple, and the class does not reset when using the filter, keeping the opacity at <code>1.0</code> on the currently selected project. </p>
  
  <p>A better outcome than expected.</p>