資料結構
網路
關係型資料庫管理系統
作業系統
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 次瀏覽
