資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 查詢所有具有指定類名的子元素？
概述
jQuery 是一個庫，包含各種具有特定功能的預定義方法。因此，要獲取所有包含特定類及其標籤的子元素，可以使用 jQuery 的 children() 方法。jQuery 的 children() 方法接受一個引數作為返回資料集的條件。由於我們想要查詢所有具有指定類的子元素，因此我們將類名作為引數傳遞給該方法以查詢所有特定類。
語法
在此方法中使用的語法如下：
$(element).children(className);
element − 在上述語法中，element 被稱為父元素，我們必須在其中定位指定的類子元素。元素可以是任何元素，例如類名、ID 名或元素本身，例如 div、label 或 p。
children() − 上述語法中的 children 是 jQuery 中已定義的方法。它返回父元素具有的子元素數量。
className − className 被稱為我們在選定的父元素中要查詢的類的名稱。
演算法
步驟 1 − 在任何文字編輯器中建立一個 HTML 基本結構，檔名為 index.html。
步驟 2 − 現在將 jQuery CDN（內容分發網路）新增到程式碼的 head 標籤中。
<script src="https://code.jquery.com/jquery-3.5.0.js"> </script>
步驟 3 − 現在使用 HTML button 標籤建立一個按鈕，其值為 filter，這將指示指定的類子元素。
<button>Filter</button>
步驟 4 − 現在建立一個 div 標籤作為父容器。
<div></div>
步驟 5 − 現在新增一些列表標籤及其值和類名。這些列表標籤充當 div 容器的子元素。
<li class="aquatic">Fish</li> <li class="land">Camel</li> <li class="aquatic">SeaHorse</li> <li class="aquatic">Whale</li> <li class="land">Elephant</li>
步驟 6 − 現在將 script 標籤新增到 HTML 的 body 中。
<script></script>
步驟 7 − 現在使用 jQuery 箭頭函式以及 click 函式和 button 作為選擇器，觸發一個查詢指定類子元素的函式。
$('button').click(() => {})
步驟 8 − 現在使用 jQuery 選擇器語法選擇父元素。
$('div')
步驟 9 − 現在使用 children() 方法查詢作為 children() 方法引數傳遞的特定類，並使用 CSS 屬性以不同的背景指示該類。
$('div').children(".aquatic").css("backgroundColor", "aquamarine");
$('div').children(".land").css("backgroundColor", "yellow");
步驟 10 − 點選按鈕以獲取指定的類。
示例
在此示例中，我們將建立一個功能來查詢任何父元素中指定類的子元素。為此，我們將建立一個按鈕來觸發構建此功能所需的所有函式，並建立一個作為“div”的父容器，該容器將包含列表標籤作為 div 的子元素。div 容器內的列表標籤將包含名稱為“aquatic”或“land”的類。因此，使用此方法，我們將區分動物列表作為陸地動物或水生動物。
<html>
<head>
<title>find all children with specified class</title>
<style>
li {
padding: 0.2rem;
margin: 0.5rem 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"> </script>
</head>
<body>
<h3> Child of parent element filtered on the basis of living habitat </h3>
<button>Filter</button>
<div style="list-style: none;">
<li class="aquatic">Fish</li>
<li class="land">Camel</li>
<li class="aquatic">Sea Horse</li>
<li class="aquatic">Whale</li>
<li class="land">Elephant</li>
</div>
<div class="indication"></div>
<script>
$('button').click(() => {
$('div').children(".aquatic").css("backgroundColor", "aquamarine");
$('div').children(".land").css("backgroundColor", "yellow");
$('.indication').html(`
<div style="display: flex;">
<div style="background-color: aquamarine;width: 1rem;height: 1rem;"></div>
Aquatic class
</div>
<div style="display: flex;">
<div style="background-color: yellow;width: 1rem;height: 1rem;"></div>
Land class
</div>`
);
})
</script>
</body>
</html>
下圖顯示了上述示例的輸出，其中我們建立了一個動物列表，這些動物屬於不同的棲息地。因此，我們將根據其指定的類來查詢動物棲息地。第一張圖片僅顯示了一個動物列表，它們是 div 容器的子元素。當點選按鈕時，它將顯示具有其指定類屬性的動物列表，這可以在第二張圖片中看到。我們指定了兩個類。第一個是“Aquatic 類”，以海綠色顯示，另一個類是“Land 類”，以黃色顯示。
結論
上述功能可用於區分不同類別的的資料。我們在此功能中使用了 children() 方法，該方法將字串型別的資料作為引數，並將指定的類儲存在物件資料型別中。我們可以在管理 Web 應用程式中管理不同型別的角色時使用此方法。始終檢查您是否已在 head 標籤中添加了 jQuery 的 CDN 連結以使此功能正常工作，因為此方法中使用的方法需要以某種方式匯入 jQuery。
2K+ 次檢視
