数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何判断所有元素是否包含相同的类名？
概述
元素中的类定义了该元素中包含的数据类型。另一个标签或元素也可以使用相同的类名。类属性没有这样的特性，即类名必须唯一。要判断所有元素是否包含相同的类，可以使用 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 animals = 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() 方法相同的功能。
361 次浏览
