Как заставить функцию JavaScript работать на всех элементах страницы

Question

Я хочу добавить класс к родительскому элементу, внутри которого есть кнопки.

Я запускаю функцию JavaScript, но это происходит только в первом элементе страницы.Как я могу предотвратить остановку первого, пожалуйста?

function createButtonWrapper () {
  var buttonList = document.querySelector('.article ul li [class^="ck-button"]');
  var buttonWrapper = buttonList.parentNode.parentNode;

  if (buttonList){
    buttonWrapper.classList.add('button-wrapper');
  }
}

createButtonWrapper();

section { display: flex; flex-direction: column; justify-content: flex-start; }

a[class^="ck-button"] {
  padding: 20px;
  color: white;
  display: inline-block;
}

.ck-button-one { background: #00C853; }
.ck-button-two { background: #00B8D4; }
.ck-button-three { background: #DD2C00; }
.ck-button-four { background: #311B92; }

.button-wrapper {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  /*li{ margin: 0 0 0 $spacing*2; }*/
}

<section>
  <div class="article">
    <ul>
      <li>
        <a class="ck-button-one">Button-1</a>
        <a class="ck-button-two">Button-2</a>
        <a class="ck-button-three">Button-3</a>
         <a class="ck-button-four">Button-4</a>
      </li>
    </ul>
  </div>
  <div class="article">
    <ul>
      <li>
        <a class="ck-button-one">Button-1</a>
        <a class="ck-button-two">Button-2</a>
        <a class="ck-button-three">Button-3</a>
         <a class="ck-button-four">Button-4</a>
      </li>
    </ul>
  </div>
</section>

Answer 1

Используйте метод forEach следующим образом:

buttonList.forEach(function(element) { 
  element.classList.add('button-wrapper');
});

Полный код:

function createButtonWrapper () {
    var buttonList = document.querySelectorAll('.article ul li [class^="ck-button"]');

    if (buttonList){
        buttonList.forEach(function(element) { 
          element.classList.add('button-wrapper');
        });
    }
}
createButtonWrapper();