Add single unique class on button at a time through foor loop

I am trying to add each unique class (given in array) on each button in the accordion.I have written the jquery code but there is some issue with the code.Currently it is adding all of those array classes on the buttons.I just want it to add only a single class at a time.Please highlight the issue in the code. Thanks

EDIT :

In my current scenerio there will be more than four buttons so i want a generic solution which can add the classes on all buttons and it should only add single classs at a time.

JQUERY CODE :

jQuery(function(){
    var wordArray = ['one','two','three','four'];
    var count = jQuery('.accordion-wrap button').length;

    for ( var i = 0;i < count; i++ ) {
      jQuery('.accordion-wrap button').each(function(index, value) {
        jQuery(this).addClass(wordArray[i])                     
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-wrap">
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
<button class="accordion one two three">
  <span class="job-title">Lorem ipsum</span>    
</button>
</div>

Answer

Consider Example #1.

jQuery(function($) {
  var wordArray = ['one', 'two', 'three', 'four'];
  var wordLength = wordArray.length;
  var buttons = $('.accordion-wrap button');
  var i = 0;

  buttons.each(function(index, elem) {
    if (i % wordLength == 0) {
      i = 0;
    }
    $(elem).addClass(wordArray[i++]);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-wrap">
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
</div>

This iterates over the buttons and will repeatedly assign a class.

Consider Example #2

jQuery(function($) {
  var wordArray = ['one', 'two', 'three', 'four'];
  var buttons = $('.accordion-wrap button');

  $.each(wordArray, function(i, val) {
    buttons.eq(i).addClass(val);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-wrap">
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
  <button class="accordion">
  <span class="job-title">Lorem ipsum</span>    
</button>
</div>

This example iterates the the Array and assigns the class to buttons that match the Index.

Advertisement

Answer