如何查找所有元素是否包含相同的类?
概述
任何元素中的类都定义了元素中包含的数据的类型。 相同的类名也可以被另一个标签或元素使用。 class 属性没有这样的属性，即类名应该是唯一的。 要查找所有元素是否包含相同的类，可以借助 HTML、CSS 和 JavaScript 来实现。 HTML 提供页面的布局和相同类的元素的布局，而 JavaScript 将提供检查所有元素是否包含相同类的功能。
语法
用于构建上述功能的语法是 −
arrayName.every((element)=>{
element.classList.contains(className);
})
算法
步骤 1 − 在文本编辑器上创建一个 HTML 文件，并向该文件添加 HTML 样板。
步骤 2 − 现在在文件主体中创建一个带有一些列表标签的无序列表，并将类属性添加到列表中，类名为"landAnimals"和"waterAnimals"。
Cat Dog Fish Horse
步骤 3 − 现在为答案创建另一个 div。
<div id="ans" style="border: 1px dashed black ;display: inline-block;"></div>
步骤 4 − 现在将脚本标记添加到文件正文。
<script></script>
步骤 5 − 现在使用 HTML DOM 存储列表的引用。
let animal = document.querySelectorAll("li");
步骤 6 − 现在将所有列表作为数组存储在变量中。
var list = Array.from(animals)
步骤 7 − 现在使用 every 遍历数组。
const bolVal = list.every((li)=>{
li.classList.contains("landAnimals");
})
步骤 8 − 每次迭代时检查列表是否包含给定的类。
li.classList.contains("landAnimals");
第 9 步 − 如果单个类不匹配，它将返回 false。
document.getElementById("ans").innerHTML=bolVal
示例
在此示例中，我们将创建一个无序列表，其中包含动物列表，还将类名添加到每个列表标签中，但在一个列表标签中，我们将添加与另一个不同的类名，并使用 classList contains() 方法检查同一类。
<html>
<head>
<title>same class or not</title>
</head>
<body>
<h3>Return true if all classes are same else false</h3>
<ul>
<li class="landAnimals">Cat</li>
<li class="landAnimals">Dog</li>
<li class="waterAnimals">Fish</li>
<li class="landAnimals">Horse</li>
</ul>
<div id="ans" style="border: 1px dashed black ;display: inline-block;"></div>
<script>
let animals = document.querySelectorAll("li");
var list = Array.from(animals)
const bolVal = list.every((li)=>{
li.classList.contains("landAnimals");
})
document.getElementById("ans").innerHTML=bolVal
</script>
</body>
</html>
下图显示了上述示例的输出，其中包含猫、狗、鱼和马等动物的列表，其类名根据其生活环境而定。因此，第三个列表包含与所有三个不同的类，因此结果为 false。因为第三个列表的类名为"waterAnimals"，而其他三个类名为"landAnimals"。
结论
此功能在某些条件下用于 DOM(文档对象模型)操作。类名还有助于从另一组中指定一组数据或元素。此功能用于搜索字段以及对数据进行排序和过滤。contains() 方法的返回类型为布尔值，因为它检查元素或数组中是否存在指定的类名。如果找到给定的类名，则返回 true，否则返回 false。我们还可以使用 Jquery 选择器来构建此功能，因为 jquery 还提供了一种 hasClass() 方法，该方法也具有与 contains() 方法相同的功能。
