0

EDIT: codepen.io/TechTime/pen/ZKdxQK this is my project. As you can see for each class one of the divs does an animation. I want ALL divs to do an animation from the list. As in, here my code tries to give each div a unique class. I want it so that some divs can have the same class and thus all receive an animation.

I want to have a list of classes and one is chosen randomly, which is then assigned to one of many divs with the same id.

So far i have been able to achieve it to the point that it gives the class to one of those divs but if x classes are in the list then only x divs get a class.

I have more divs than classes. How do I solve my problem?

Below is my code so far:

$(document).ready(function() {
  var klasses2 = [

    "animated bounce",
"animated flash",
"animated pulse",
"animated rubberBand",
"animated shake",
"animated headShake",
"animated swing",
"animated tada",
"animated wobble",
"animated jello",
"animated bounceIn",
"animated bounceInDown",
"animated bounceInLeft",
"animated bounceInRight",
"animated bounceInUp",
"animated bounceOut",
"animated bounceOutDown",
"animated bounceOutLeft",
"animated bounceOutRight",
"animated bounceOutUp",
"animated fadeIn",
"animated fadeInDown",
"animated fadeInDownBig",
"animated fadeInLeft",
"animated fadeInLeftBig",
"animated fadeInRight",
"animated fadeInRightBig",
"animated fadeInUp",
"animated fadeInUpBig",
"animated fadeOut",
"animated fadeOutDown",
"animated fadeOutDownBig",
"animated fadeOutLeft",
"animated fadeOutLeftBig",
"animated fadeOutRight",
"animated fadeOutRightBig",
"animated fadeOutUp",
"animated fadeOutUpBig",
"animated flipInX",
"animated flipInY",
"animated flipOutX",
"animated flipOutY",
"animated lightSpeedIn",
"animated lightSpeedOut",
"animated rotateIn",
"animated rotateInDownLeft",
"animated rotateInDownRight",
"animated rotateInUpLeft",
"animated rotateInUpRight",
"animated rotateOut",
"animated rotateOutDownLeft",
"animated rotateOutDownRight",
"animated rotateOutUpLeft",
"animated rotateOutUpRight",
"animated hinge",
"animated jackInTheBox",
"animated rollIn",
"animated rollOut",
"animated zoomIn",
"animated zoomInDown",
"animated zoomInLeft",
"animated zoomInRight",
"animated zoomInUp",
"animated zoomOut",
"animated zoomOutDown",
"animated zoomOutLeft",
"animated zoomOutRight",
"animated zoomOutUp",
"animated slideInDown",
"animated slideInLeft",
"animated slideInRight",
"animated slideInUp",
"animated slideOutDown",
"animated slideOutLeft",
"animated slideOutRight",
"animated slideOutUp",

  ];
  klasses2.sort(randOrd);
  $("#zewrapper #tris").each(function(i, val) {
    $(this).addClass(klasses2[i]);
  });
});
Techtime
  • 27
  • 5
  • 3
    `$("#zewrapper #tris").each` - this makes little sense, as IDs should be unique. In other words, there should be only one element in DOM matched by `#tris` selection. Use classes instead. – raina77ow Jun 02 '17 at 18:23
  • 1
    You can use modulo: `klasses2[i % klasses2.length]` – Washington Guedes Jun 02 '17 at 18:27
  • You could use `klasses2[Math.floor((Math.random() * n) + 1)];` where `n` is your number of classes to select a class then assign it to the div – mhatch Jun 02 '17 at 18:28
  • @WashingtonGuedes Wouldn't that give you the same result every time? It would not be truly "random" – mhatch Jun 02 '17 at 18:30
  • I got you, but if OP meant _random_ literally, then _"I have more divs than classes"_ wouldn't be the problem. – Washington Guedes Jun 02 '17 at 18:36
  • https://codepen.io/TechTime/pen/ZKdxQK this is my project. As you can see for each class one of the divs does an animation. I want ALL divs to do an animation from the list. As in, here my code tries to give each div a unique class. I want it so that some divs can have the same class and thus all receive an animation. – Techtime Jun 02 '17 at 18:38

1 Answers1

1

To summarize the comments:

You need to change from selecting ids to selecting classes

Instead of using the same id for all the divs (unorthodox), you can use the same class and the change the selector eg. $("#zewrapper .tris").

Use the same classes from the collection again

You can replace the klasses2[i] with either:

  • klasses2[i % klasses2.length] if you want to keep the order
  • klasses2[Math.floor(Math.random() * klasses2.length)] if you want to be random
MaanooAk
  • 2,418
  • 17
  • 28
  • "Unorthodox" here is the polite way of saying "invalid". It is not valid for multiple elements in an HTML document to have identical `id` attribute values. – Adrian Jun 02 '17 at 18:44
  • More on this topic (for curious people): https://stackoverflow.com/a/8498617/7362988 – MaanooAk Jun 02 '17 at 18:52