How to make a JavaScript function run on all elements of the page

Question

I want to add a class to the parent element that has buttons inside it.

I am running a JavaScript function but it only happens on the first element of the page. How can I prevent it from stopping on the first one, please?

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>

S-- · Accepted Answer · 2018-10-04 10:52:44Z

2

Use the forEach method like so:

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

So full code:

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

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

edited Oct 4, 2018 at 10:52

answered Oct 4, 2018 at 10:35

S--

4182 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arkellys Over a year ago

It should be querySelectorAll() and not querySelector(), which select only the first element.

Collectives™ on Stack Overflow

How to make a JavaScript function run on all elements of the page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related