jQuery .removeClass and addClass

Question

I cant remove or add the class within a div and trying to remove the class .wew when the .st-collapse is visible and add class .wew1 if the .st-collapse is hidden

so my flow is go to each parent div and find its div child

my HTML

    <div class="st">
      <div class="st-heading wew">
       <a href="#">Link 1</a>
      </div>
      <div class="st-collapse">
       <ul>
        <li><a href="#">Sub-Link 1</a></li>
        <li><a href="#">Sub-Link 2</a></li>
        <li><a href="#">Sub-Link 3</a></li>
       </ul>
      </div>
     </div>
    <div class="st">
          <div class="st-heading wew">
           <a href="#">Link 1</a>
          </div>
          <div class="st-collapse">
           <ul>
            <li><a href="#">Sub-Link 1</a></li>
            <li><a href="#">Sub-Link 2</a></li>
            <li><a href="#">Sub-Link 3</a></li>
           </ul>
          </div>
         </div>

this is my script

  jQuery(".st").each(function(){
      var s = jQuery(this).find(".st-collapse").is(":visible");
      if(s){
        jQuery(this).find(".st-heading").removeClass("wew");
      }else{
        jQuery(this).find(".st-heading").addClass("wew1");
      }
    });

http://stackoverflow.com/questions/8774089/detect-if-an-element-is-visible — Rohit Kishore, Oct 14 '16 at 05:59
@Loading.. yes that was i thought too but i doesnt remove or add the classes — Pure Rhymer Organization, Oct 14 '16 at 06:00
This only runs once during page load. It should work fine if it's placed at the end of the page. It works for me. If you're expecting it to work continuously, you'll have to come up with a way to trigger it when it needs to run. — Ouroborus, Oct 14 '16 at 06:03
Okay, then it works. As I said, it will only run once. It does remove `wew` from the particular elements. — Ouroborus, Oct 14 '16 at 06:05
it's just adding class when not visible, use `jQuery(this).find(".st-heading").removeClass('wew').addClass("wew1");` instead of `jQuery(this).find(".st-heading").addClass("wew1");` — Mohit Tanwani, Oct 14 '16 at 06:06
@Loading.. i got this error `SyntaxError: illegal character` at wew1 — Pure Rhymer Organization, Oct 14 '16 at 06:13
You must define what exactly "not working" means in the context of your particular situation. What do you expect it to do. What do you perceive it actually doing? Also it would be nice if we knew what the classes `.whe`atever so and so is as well. — zer00ne, Oct 14 '16 at 06:42
@zer00ne i put different css in both `.wew` and `.wew1` for example I put `background:red` on `.wew` so the background in `.st-heading` become red if the `.st-collapse` is visible — Pure Rhymer Organization, Oct 14 '16 at 06:50
i dont know why but it got working i just reverse the condition instead of `.is(".visible")` i make it `.is(":hidden")` and make the `if` addClass and `else` into removeClass — Pure Rhymer Organization, Oct 14 '16 at 06:52
If I'm not mistaken, in jQuery it goes `.is(":visible");` with a colon `:` not a period `.` Nevertheless I'm glad you have resolved your dilemma, happy coding. — zer00ne, Oct 14 '16 at 07:24

score 1 · Answer 1 · answered Oct 14 '16 at 06:31

I'm not 100% sure (I'm probably 70% sure actually) about what your problem is, since you posted a statement and not a question. So let me know if I'm way off or close or whatever.

The classes were not provided and I assume it must be of some importance since we are dealing with visibility and two classes(probably with diametrically opposed properties involving either display,visibility, and/or opacity. So I made my own classes .off and .on.

    .st-heading.on + .st-collapse {
      opacity: 1;
    }
    .st-heading.off + .st-collapse {
      opacity: 0;
    }

The classes in question belong to .st-header so I added the + adjacent sibling selector to indicate that the visibility of .st-collapse hinges upon whether .st-heading is .off or .on. I shortened the jQuery by:

...removing .each() because with jQuery you don't need to be specific in simple cases. $('.st-heading') will find each .st-heading on the page as well...
...replacing add/removeClass() with toggleClass()

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <style>
    .st-heading.on + .st-collapse {
      opacity: 1;
    }
    .st-heading.off + .st-collapse {
      opacity: 0;
    }
  </style>
</head>

<body>
  <section class="st">
    <div class="st-heading off">
      <a href="#">Link 1</a>
    </div>
    <div class="st-collapse">
      <ul>
        <li>
          <a href="#">Sub-Link 1</a>
        </li>
        <li>
          <a href="#">Sub-Link 2</a>
        </li>
        <li>
          <a href="#">Sub-Link 3</a>
        </li>
      </ul>
    </div>
  </section>
  <section class="st">
    <div class="st-heading on">
      <a href="#">Link 1</a>
    </div>
    <div class="st-collapse">
      <ul>
        <li>
          <a href="#">Sub-Link 1</a>
        </li>
        <li>
          <a href="#">Sub-Link 2</a>
        </li>
        <li>
          <a href="#">Sub-Link 3</a>
        </li>
      </ul>
    </div>
  </section>
  <script>
    $(".st-heading").toggleClass('on off');
  </script>
</body>

</html>

score 0 · Answer 2 · answered Oct 14 '16 at 06:13

0

Code is working fine

check the bin at Working Demo of Code

I have did that at click event! Check!

Maybe jQuery is missing in your page

answered Oct 14 '16 at 06:13

Arjun

3,248
18
35

jQuery is in my page i had slider and carousel – Pure Rhymer Organization Oct 14 '16 at 06:16
Hey PRO, can you paste the the page and whole Browser console output? That may help!!! – Arjun Oct 14 '16 at 06:24
i just change my condition into `.is(":hidden")` and reverse the output I dont know why it work – Pure Rhymer Organization Oct 14 '16 at 06:45

jQuery .removeClass and addClass

2 Answers2