CODEWITHSUNDEEP
javascriptjquerycss
J82
J82

Reputation: 8457

If element does not have class, don't show; otherwise, show?

Here is the site.

I have an unordered list containing a group of photos. The navigation is set up like a filter so that if I click on X, only the photos in the X category get displayed, etc. All of the photos are initially set with the 'visible' class like this:

<ul>
  <li class="visible">photo</li>
  <li class="visible">photo</li>
  <li class="visible">photo</li>
  etc.
</ul>

When a certain filter is clicked, the photos that are not in that category get the 'visible' class removed causing them to fade out. However, while the photos get faded out, they still take up the same amount of space causing large amounts of empty space to appear.

enter image description here

I am trying to get rid of this empty space. My idea was to write code that says:

iflidoes not have the 'visible' class, then hide. else, show.

Below is my attempt. However, this causes none of the photos to show up. Where have I gone wrong?

jQuery(document).ready(function($){

    if (!$( '#gallery-wrap li' ).hasClass( 'visible')) {
        this.hide();
    } else {
        this.show();
    }

});

Upvotes: 0

Views: 1569

Answers (3)

machine
machine

Reputation: 1400

I'm not a huge fan of using Javascript where CSS will do. This script snippet will inject some styling into the head of the document which should give you your desired effect. I've tried to maximise compatibility by using two selectors instead of a :not(), and by using an element query instead of document.head. Hope this works out for you:

(function() {
  var style = document.createElement('style'); 
  style.appendChild(document.createTextNode('#gallery-wrap>ul>li{display: none;} #gallery-wrap>ul>li.visible{display: list-item;}'));
  document.getElementsByTagName('head')[0].appendChild(style); })();

The above assumes that that is not your site and you want to make a bookmarklet or something to optimise it for your use. If it's actually yours, just add this to your CSS file:

#gallery-wrap > ul > li {
  display: none;
}

#gallery-wrap > ul > li.visible {
  display: list-item;
}

Or, if you're feeling fancy and very slightly less supporting of older browsers:

#gallery-wrap > ul > li:not(.visible) {
  display: none;
}

Upvotes: 0

charlietfl
charlietfl

Reputation: 171690

Can do this with one line

$('#gallery-wrap li').hide().filter('.visible').show();

It first hides all then filters the visible class and shows that subset

OR Can do this with pure CSS

   #gallery-wrap li{ display:none}
   #gallery-wrap li.visible{ display:inline-block}

Upvotes: 2

Terry
Terry

Reputation: 66188

this in your code is not referring to the elements that match your #gallery-wrap li selector. Instead, use .each() and then use $(this) in the enclosure:

$('#gallery-wrap li').each(function() {
    if(!$(this).hasClass('visible')) {
        $(this).hide();
    } else {
        $(this).show();
    }
});

p/s: It helps to create a minimal, reduced example of your code. Linking to external sites is strongly discouraged because they are susceptible to link rot, which means they will lose relevance to future users who come across this question/issue.

Upvotes: 0

Related Questions