Jquery to javascript or Jquery to pseudo code

Question

I am having trouble with some jQuery code. Although I am fairly proficient in JavaScript my understanding of jQuery is limited.

I was hoping someone could go through the following code with me to convert it to JavaScript or pseudo code so I can convert it in to JavaScript.

if (someVar !== 1000) {
  $(element).appendTo('#someID').delay(someVar * 1000).queue(function() {
    $(this).removeClass(someClass).addClass(someOtherClass).delay(1000).queue(function() {
      $(this).remove()
    }).dequeue();
  });
}

My break down is append $(element) to #someID after a period of time. Then remove someClass and add someOtherClass to this event after some time then remove this event and dequeue.

I just don't understand the syntax. I am going to learn but at the moment I need to either understand what the above is saying so I can convert to JavaScript, or get some quick help converting it to JavaScript.

I have looked at a couple of sites in regards to converting jQuery to JavaScript but I am still stuck.

All the delay().queue() pattern is doing is executing some logic after an specified time. You can convert that to setTimeout() — Rory McCrossan
– Rory McCrossan, Commented Oct 16, 2019 at 9:08

mplungjan · Accepted Answer · 2019-10-16 09:11:53Z

0

Have a look at this

const classList(elt) {  // from https://stackoverflow.com/a/29143197/295783
  var list = elt.classList;
  return {
      toggle: function(c) { list.toggle(c); return this; },
      add:    function(c) { list.add   (c); return this; },
      remove: function(c) { list.remove(c); return this; }
  };
}

const parent = document.getElementById("someID");
const child = document.createElement(...)

if (someVar !== 1000) {
  parent.appendChild(child);
  setTimeout(function() {
    classList(child).remove(someClass).add(someOtherClass);
    setTimeout(function() { child.remove() }, 1000);
  }, 1000 * someVar);
}

answered Oct 16, 2019 at 9:11

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Paul Hashmi Over a year ago

More than likely, sorry about that. I haven't got the time today to read up on the tiniest bit of jquery. I marked as correct as the code and link you posted up makes it clear to me what the jquery is doing. Thanks again for your help.

mplungjan Over a year ago

The top code is just a helper function to keep it DRY to allow the chaining of the classlist manipulation

Paul Hashmi Over a year ago

Yeah I saw that thanks, I will use in the future :D...either that or simply learn jquery lol

Collectives™ on Stack Overflow

Jquery to javascript or Jquery to pseudo code

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related