jQuery add css if not exist

Question

I have a problem with JQuery with Example below.

$(".side-nav ul li ul:not([class*='hide'])").addClass("hide");

.hide {
  display: none;
}

<div class="side-nav">
  <ul>
    <li>
      <a href="#">FIRST</a>
      <ul class="hide">
        <li>one</li>
        <li>two</li>
        <li>tree</li>
      </ul>
    </li>
    <li>
      <a href="#">SECOND</a>
      <ul> <!-- here need add css class="hide" -->
        <li>one</li>
        <li>two</li>
        <li>tree</li>
      </ul>
    </li>
  </ul>
</div>

Example: https://codepen.io/moldow/pen/ExyzJOb

Since your problem is with jQuery, please also add that code into the question - preferrably using a Stack Snippet, which supports the use of jQuery. — Peter B, Nov 20 '20 at 09:25
I added your code in to a snippet in the question. Please do this in future as users should not have to go off site to answer a question. With regard to the issue, please describe your problem. I can see from your code that you've not included jQuery.js in the page so that's likely to be a big problem — Rory McCrossan, Nov 20 '20 at 09:26
As already mentioned, the error you get ("Uncaught ReferenceError: $ is not defined") means that you haven't linked the jQuery file. — Álvaro González, Nov 20 '20 at 09:30
Does this answer your question? [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — Álvaro González, Nov 20 '20 at 09:30
Simply `$(".side-nav ul li ul").addClass("hide");` - there will be no duplicate class, even if it would be - there is no difference — Justinas, Nov 20 '20 at 09:33

score 1 · Accepted Answer · answered Nov 20 '20 at 09:40

You can iterate each ul element and check if it contains the class hide

$(".side-nav ul li ul").each(function() {
  if(!$(this).hasClass("hide")) {
    $(this).addClass("hide");
 }
})

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav">
    <ul>
        <li>
            <a href="#">FIRST</a>
            <ul class="hide">
                <li>one</li>
          <li>two</li>
          <li>tree</li>
                </ul>
        </li>
    <li>
            <a href="#">SECOND</a>
            <ul> <!-- here need add css class="hide" -->
                <li>one</li>
          <li>two</li>
          <li>tree</li>
                </ul>
        </li>
    </ul>
</div>

Another approach is to use $(".side-nav ul li ul").addClass("hide"); It will add the class hide only to the element that doesn't have it, so there will be no duplicate classes in case the element has the class

$(".side-nav ul li ul").addClass("hide");

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side-nav">
    <ul>
        <li>
            <a href="#">FIRST</a>
            <ul class="hide">
                <li>one</li>
          <li>two</li>
          <li>tree</li>
                </ul>
        </li>
    <li>
            <a href="#">SECOND</a>
            <ul> <!-- here need add css class="hide" -->
                <li>one</li>
          <li>two</li>
          <li>tree</li>
                </ul>
        </li>
    </ul>
</div>

jQuery add css if not exist

1 Answers1