Hide div unless class is X

Question

If I have a a group of divs that look like this:

<div class="entry-container #sts01"></div>
<div class="entry-container"></div>
<div class="entry-container #sts01"></div>
<div class="entry-container #sts02"></div>
<div class="entry-container"></div>
<div class="entry-container #sts03"></div>
<div class="entry-container"></div>
<div class="entry-container #sts02"></div>

and I only want to show the divs that contain a certain #, something like:

$('.entry-container:contains(:not("#sts01"))').hide();

Any ideas on how to make this work?

score 4 · Answer 1 · answered Apr 12 '16 at 04:15

You can filter those elements using not and class selector

$('.entry-container').hide().filter('.\\#sts01').show(); //you need to escape the `#` in the class name

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-container #sts01">1</div>
<div class="entry-container">0</div>
<div class="entry-container #sts01">1</div>
<div class="entry-container #sts02">2</div>
<div class="entry-container">0</div>
<div class="entry-container #sts03">3</div>
<div class="entry-container">0</div>
<div class="entry-container #sts02">2</div>

madalinivascu · Answer 2 · 2016-04-12T04:22:02.980

0

Try:

$('.entry-container').hide();//hide all
$('div[class^="#sts"]').show();//show only the elements whos class start(^) with `#sts`

or

$('.entry-container').not('[class^="#sts"]').hide();

edited Apr 12 '16 at 04:22

answered Apr 12 '16 at 04:11

madalinivascu

32,064
4
39
55

score 0 · Answer 3 · answered Apr 12 '16 at 04:15

$('.entry-container').not('.sts01').hide();//hide all execpt class sts01

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-container sts01">1</div>
<div class="entry-container">2</div>
<div class="entry-container sts01">3</div>
<div class="entry-container sts02">4</div>
<div class="entry-container">5</div>
<div class="entry-container sts03">6</div>
<div class="entry-container">7</div>
<div class="entry-container sts02">8</div>

Select all class and use .not() to exclude the class you want to show

Description: Remove elements from the set of matched elements.

score 0 · Answer 4 · edited May 23 '17 at 11:50

CSS class names starting with # are not valid (unless you go out of the way to escape them everywhere). You should better use some other selector like data-* attributes. Then you can easily select them using an attribute selector. For eg:

$('.entry-container:not([data-value]').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-container" data-value="#sts01"></div>
<div class="entry-container"></div>
<div class="entry-container" data-value="#sts02"></div>

Hide div unless class is X

4 Answers4