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

Question

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();
    }

});

Sounds like you need to update your css. Change `visibility:hidden/visible;` to `display:none/block;` http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone — PeterKA, Dec 23 '14 at 00:38
possible duplicate of [What is the difference between visibility:hidden and display:none?](http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) — PeterKA, Dec 23 '14 at 00:41

charlietfl · Accepted Answer · 2014-12-23T01:05:53.340

2

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}

edited Dec 23 '14 at 01:05

answered Dec 23 '14 at 00:59

charlietfl

170,828
13
121
150

Actually, I'm trying to get the reverse effect. So if the element has the `visible` class, it should show, otherwise (if there is no `visible` class), it should be hidden. – J82 Dec 23 '14 at 01:00
I tried your code but the `li` elements without the `visible` class are still being shown. In the html, it looks like this: `
`

J82

Dec 23 '14 at 01:04

create a demo with just enough css to see what's going on – charlietfl Dec 23 '14 at 01:06

i suspect you were trying to use the script before the elements existed – charlietfl Dec 23 '14 at 01:16

Good intuition, charlietfl: always try to figure it out with CSS first, that's my motto at least, ;-) – Marventus Dec 23 '14 at 01:52

score 0 · Answer 2 · answered Dec 23 '14 at 00:38

0

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.

answered Dec 23 '14 at 00:38

Terry

63,248
15
96
118

I used your code but the `li` elements that don't have the 'visible' class still aren't being hidden. Also, just to be clear, does this mean that they're supposed to get a `display:none` added? – J82 Dec 23 '14 at 00:45
@J82 As others have also asked, it would be of tremendous help (also to yourself) that you create a minimal example of your issue, either as a native code snippet or as a fiddle. – Terry Dec 23 '14 at 01:10

mirichan · Answer 3 · 2014-12-23T01:07:16.260

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;
}

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

3 Answers3