how to loop multiple class in html

I'm not sure I understand the question. Are you wanting to use fewer classes on your anchor tags? Or are you trying to find a way to programmatically add classes (i.e. using a for loop in javascript)? Or is it something else entirely?
Just trying to clarify what you are asking for :)

Thanks for quick reply

and Yes  trying to find a way to programmatically add classes (i.e. using a for loop in javascript )

Alright, here's a way to do it:
JS code

var arr = ['class1', 'class2', 'class3', 'class4'];

for(var i = 0; i < arr.length; i++) {
  $('.wrapper').append('<p class="className ' + arr[i] + '">class name: ' + arr[i] + '</p>');
}

Select allOpen in new window

HTML markup

<div class="wrapper">

</div>

Select allOpen in new window

You'll have to adapt it for your exact use case, but I believe this accomplishes what you want. Just update the array in the JS to be the classes you need, and you should be good to go :)
Here's a link to a codepen I made if you want to play with it: http://codepen.io/anon/pen/VexRjb

You can take it one step farther by having an array of objects that contains the classes and paths to the images:

var arr = [
  {
    class: 'class1',
    img: 'images/myimg1.png'
  },
  {
    class: 'class2',
    img: 'images/myimg2.png'
  },
  {
    class: 'class3',
    img: 'images/myimg3.png'
  },
  {
    class: 'class4',
    img: 'images/myimg4.png'
  }
];

for(var i = 0; i < arr.length; i++) {
  $('.wrapper').append('<a href="#" class="button animated ' + arr[i].class + '"><img src="' + arr[i].img + '" width="260px" height="130px"/>&nbsp;</a>');
}

Select allOpen in new window

tried but not working , i am missing something,
so far..
created a animateLoop.js files
and wrote JS code as per your suggestion
then in my index page i wrote following line of code

<script type="text/javascript" src="js/animateLoop.js"></script>

Select allOpen in new window

and what i am missing here...? please suggest

<div class="wrapper">


</div>

Select allOpen in new window

You would also have to include jQuery if you want to use the exact codes have provided.

added but no luck
and allready there is jquery.js
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/animateLoop.js"></script>

I don't understand what you are trying to do here - how are you trying to animate your image and why do you need to add classes.

Here is an article on animating images using jQuery which might be of use https://www.experts-exchange.com/articles/13057/Simple-animation-using-JQuery.html

Otherwise post back with a description of what you are trying to do so we have a context.

Working sample for the above article here

Would you be able to post the js code of what you have so far so we can diagnose the problem?

greetings  crystal_Tech , , I can understand PART of what you ask about , the change the Animation visual to another one like  shake, pulse, jello, or flash class.  BUT I do NOT understand the TIMING (when you need to change the animation class) you need for this -  
     "how can i use all this classes in a loop one by one"

you will not be able use all of these animation classes at one time in a JS loop,  you could have a user interaction ( icon or button touch event ) to trigger an animation change, , or maybe a JS Timer, to change the animation every 30 seconds?
Can you explain what your page needs to do to have an effect (change animation type) as a result of something, touch, scroll, timer?

Thanks for helping me

@ Julian  : wow nice article,  can i use this balloon animation code in my one of project..?

@ Slick812 : Exactly,  i supposed to ask "how can i use all this classes in a loop one by one.?"
Thanks for correcting me :-)

so far

<!-- all classes is in animate.css  like jello, pulse, flase, bounce etc...--> 
<link rel="stylesheet" href="css/animate.css">

<!-- how i use single class to animate following image -->
<a href="#" class="button animated jello"><img src="images/myimg.png" width="260px" height="130px"/>&nbsp;</a>

<style>

body {
margin: 0px;

font-family: sans-serif;
text-align: left; 
}

a.button {
background:#white;
color:white;
padding:10px;
text-decoration: none;
display: inline-block;
font-size:16px;
border-radius:20px;
<!--following line of code is for duration and delay timing -->
-webkit-animation-duration: 4s;
-webkit-animation-delay: 2s; 

<!--following line of code is to continue animate according to above timing -->
-webkit-animation-iteration-count: infinite;
}

</style>

Select allOpen in new window

i hope i explained well my question .. :-)

OK, that helps, but you did not give information like "I need the animation to change from jello to pulse after 15 (20, 30, 40, 50) seconds, and then change to the next animation type in an array list after another 15 seconds. The order of animation types should be these 4  -  jello, pulse, flase, bounce  .

and also, you use the   -webkit-   css,  like -
      -webkit-animation-duration: 4s;

BUT, this is not the current standard, it's without the  -webkit-  , like -
      animation-duration: 4s;

you maybe should add to the CSS, the current standards.

- - - - - - - - - - - -

I think it would help to have an ID in the <a> , like -
<a id="aniA1" href="#" class="button animated jello">

wow nice article,  can i use this balloon animation code in my one of project..?

of course - that's why I put it there.

how can i use all this classes in a loop one by one.?

Is this asking how to apply animations one after the other? You have an element and you want to apply class1 - then when that is done class2 etc?

Thanks Slick
exactly i wanted...
Its working like charm

Thank you So Much