如何使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();