如何查找所有元素是否包含相同的类？

想要查找页面中是否所有的元素都包含相同的类，我们可以使用 JavaScript 中的 DOM 操作来实现。以下是一些实现方式：

方法一：使用 JavaScript 的 querySelectorAll() 方法

const elements = document.querySelectorAll('*');
const classList = [];

for (let el of elements) {
  if (el.classList.length > 0) {
    classList.push(el.classList);
  }
}

if (classList.length > 0) {
  const first = classList[0];

  for (let i = 1; i < classList.length; i++) {
    if (first.toString() !== classList[i].toString()) {
      console.log('不是所有元素都包含相同的类。');
      return false;
    }
  }

  console.log('所有元素都包含相同的类。');
  return true;
} else {
  console.log('没有元素包含类。');
  return false;
}

上面的代码中，我们首先使用 querySelectorAll() 方法来获取页面中的所有元素，然后遍历这些元素，将它们的类添加到一个数组中。最后，我们检查这个数组是否包含多个类数组，如果不是则说明所有元素都包含相同的类。注意，这里我们使用了 toString() 方法是因为 classList 实际上是一个 DOMTokenList 类型的对象，该对象中的元素是类名，我们需要以逗号分隔的字符串的形式来比较它们。

方法二：使用 jQuery 的 hasClass() 方法

如果我们使用了 jQuery 库，那么查找所有元素是否包含相同的类会非常简单，只需要使用 hasClass() 方法即可。以下是一些例子：

// 用于比较所有元素是否包含相同的类
$.fn.allHaveClass = function(className) {
  let result = true;
  this.each(function() {
    if (!$(this).hasClass(className)) {
      result = false;
    }
  });
  return result;
};

// 检查所有元素是否都包含 'test' 类
if ($('*').allHaveClass('test')) {
  console.log('所有元素都包含 "test" 类。');
} else {
  console.log('不是所有元素都包含 "test" 类。');
}

// 检查所有元素是否都包含 'hide' 类
if ($('*').allHaveClass('hide')) {
  console.log('所有元素都包含 "hide" 类。');
} else {
  console.log('不是所有元素都包含 "hide" 类。');
}

// 检查所有 'img' 元素是否都包含 'border' 类
if ($('img').allHaveClass('border')) {
  console.log('所有 img 元素都包含 "border" 类。');
} else {
  console.log('不是所有 img 元素都包含 "border" 类。');
}

上面的代码中，我们首先定义了一个名为 allHaveClass() 的 jQuery 插件，用于比较所有元素是否都包含一个特定的类。然后，在实际使用时，我们可以使用 allHaveClass() 方法来检查所有元素是否包含相同的类，或检查特定类型的元素是否包含特定的类。需要注意的是，该方法仅当有元素被选中时才会返回 true。