如何一次选择数组中的所有项目，并向它们添加类答案

【问题标题】：How to select all items in array at once, and add class to them如何一次选择数组中的所有项目，并向它们添加类
【发布时间】：2017-02-03 01:24:05
【问题描述】：

我希望这个函数通过给它们 css .hidden 属性来隐藏我的 html 中的按钮。我试过 [0, 1, 2, 3, 4] 但它没有按预期工作，这段代码有效，但我想知道是否有更有效的方法来做到这一点..？

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');
}

【问题讨论】：

标签： javascript css jquery-selectors

【解决方案1】：

您不能一次将一个类添加到所有数组元素，无论您选择哪种技术都必须遍历数组；幸运的是，JavaScript 有几种方法可以遍历数组。

如果你会使用 ES6，你可以使用 Array.from() 和箭头函数，可以使用如下：

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');
}

如果没有 ES6，您可以通过以下方式重新创建上述行为：

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');
  });
};

参考资料：

【讨论】：

【解决方案2】：

如果您能够使用 ES6，请尝试一个简单的 forEach 循环。

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

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

这将遍历每个按钮元素并为其“添加”一个 .hidden 类。这不会取代以前的课程，只需将其添加到您可能拥有的其他课程中即可。

如果您以后想使用它，可以将代码放在一个函数中，然后在需要的地方调用该函数。

希望这会有所帮助。

【讨论】：

【解决方案3】：

最简单的方法是使用jQuery。 jQuery 的类选择器标记文档上的所有元素，并一次对它们执行所有操作。

你的函数应该是这样的：

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

但首选的方法是使用 jQuery 的函数 hide() 而不是 addClass('hidden')。

【讨论】：

【解决方案4】：

使用简单的循环

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

【讨论】：

【解决方案5】：

您可以使用 jQuery 进行投标：

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

【讨论】：

【解决方案6】：

试试这个，比较容易解决

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

【讨论】：

【解决方案7】：

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

【讨论】：

感谢您的回答，但在这种特殊情况下我没有使用 jquery，因为我使用的是 querySelector
您在问题中添加了标签“jquery-selector”，所以我想您正在使用 jquery。