CODEWITHSUNDEEP
javascriptcssjquery-selectors
Joe
Joe

Reputation: 175

How to select all items in array at once, and add class to them

I would like this function to hide buttons in my html, by giving them css .hidden attribute. I have tried [0, 1, 2, 3, 4] but it does not work as supposed, this code works but I was wondering if there is a more efficient way to do it..?

function hideButtons(){
var buttons = document.querySelectorAll('.buttons');
  buttons[0].classList.add('hidden'); 
  buttons[1].classList.add('hidden');
  buttons[2].classList.add('hidden');
  buttons[3].classList.add('hidden');
  buttons[4].classList.add('hidden');
}

Upvotes: 5

Views: 26997

Answers (7)

David Thomas
David Thomas

Reputation: 253506

You can't add a class to all array-elements at once, regardless of the technique you choose you have to iterate over the array; fortunately JavaScript has several ways to iterate over Arrays.

If you're able to use ES6, you have access to Array.from(), and Arrow functions, which can be used as follows:

function hideButtons(){

  // document.querySelectorAll() retrieves all elements
  // matching the supplied CSS selector, and returns
  // a non-live NodeList:
  var buttons = document.querySelectorAll('.buttons');

  // Array.from() converts the supplied Array-like object
  // into an Array, enabling the use of Array methods:
  Array.from( buttons )

    // here button represents the current element
    // of the Array of buttons over which we're iterating,
    // the expression following the fat arrow ('=>')
    // is executed on each iteration, and adds the 'hidden'
    // class-name to each element of the Array:
    .forEach(button => button.addClass('hidden');
}

Without ES6, you can recreate the above behaviour with the following:

function hideButtons(){
  var buttons = document.querySelectorAll('.buttons'),

      // here we use Function.prototype.call() to allow
      // us to apply the Array.prototype.slice to the
      // NodeList, creating an Array from the NodeList:
      buttonArray = Array.prototype.slice.call(buttons, 0);

  // here we use Array.prototype.forEach(), with its
  // anonymous function:
  buttonArray.forEach(function(button) {
    // 'button' again refers to the current
    // element of the array of elements over
    // which we're iterating.

    // here we add the 'hidden' class-name to
    // each element of the array over which
    // we're iterating:
    button.classList.add('hidden');
  });
};

References:

Upvotes: 4

Michiel J Otto
Michiel J Otto

Reputation: 2331

If you are able to use ES6, try a simple forEach loop.

let buttons = document.querySelectorAll('.buttons'); 

buttons.forEach(btn => {
 btn.classList.add('hidden');
});

This will loop through every button element and give it 'add' a class of .hidden. This will not replace the previous class, just add it to the other classes you may have.

If you want to use it later on, you can place the code within a function and just call the function where you need it.

Hope this helps.

Upvotes: 0

AwesomeGuy
AwesomeGuy

Reputation: 1089

The easiest way to do this is with jQuery. jQuery's class selectors mark all elements on the document, and perform actions on them all at once.

Your function should look like this:

function hideButtons() {
    $('.buttons').addClass('hidden');
}

But prefered way to do this would be using jQuery's function hide() instead of addClass('hidden').

Upvotes: 0

charlietfl
charlietfl

Reputation: 171698

Use a simple loop

for(var i = 0; i < buttons.length; i++){
    buttons[i].classList.add('hidden');
}

Upvotes: 7

Nach
Nach

Reputation: 58

You can use jQuery to do your bidding: 

 $('selector').addClass('class_name');

Upvotes: 0

Aleksandar Matic
Aleksandar Matic

Reputation: 799

Try this, it's a bit easier solution

$('.buttons').hide();

Upvotes: 0

ElChupacabra
ElChupacabra

Reputation: 1091

$('.buttons').addClass('hidden');

Upvotes: 1

Related Questions