Hide div unless class is X

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?

Answers 1

  • 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>


Related Articles