Question

使用jQuery，可以使用addClass / removeClass / toggleClass方法来操作类。

我们可以使用classList做类似的新本机Node方法 - 但是当我们需要对一组元素进行操作时，一个有问题的情况。

抽象循环的方法看起来如何，我们不需要将querySelectorAll返回的NodeList转换为数组，并且每次手动将forEach转换为它？

e.g。：

const tableRows = [...document.querySelectorAll('table tbody tr')];
tableRows.forEach((element) => {
  // do stuff for every element here
});

我的解决方案是

Array.prototype.addClass = function (className) {
  this.forEach((element) => {
    element.classList.add(className);
  });
};

Array.prototype.removeClass = function (className) {
  this.forEach((element) => {
    element.classList.remove(className);
  });
};

但在原型上添加方法并不是一个好主意。

Answer 1

即使使用jQuery - 引擎盖下它也完全一样一个jQuery对象有一个包含所有DOM元素的列表，当你在jQuery对象上调用一个方法时 - 它遍历所有DOM元素并在DOM元素上调用该特定方法。

检查这个例子：
https://github.com/jquery/jquery/blob/master/src/attributes/classes.js#L29

最终 - 它是一样的。

请注意，jQuery做了更多的事情，所以如果你正在考虑效率 - 可能你会编写的代码会更高效（如果你在谈论循环元素列表以添加/删除类）。

操纵querySelectorAll元素而不循环遍历NodeList

1 个答案: