資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學如何使用 jQuery 篩選任何元素的子元素？
概述
jQuery 是一個很棒的 JavaScript 庫，它包含許多預先構建的方法，這些方法可以幫助我們在不編寫大量程式碼的情況下執行特定功能。在 jQuery 中，元素可以被認為是任何 HTML 元素，它是另一個元素的父元素。因此，元素內部的元素也被稱為該元素的子元素，包含子元素的容器是父元素。因此，使用 jQuery 篩選任何元素的子元素可以使用 jQuery children() 方法和 CSS（層疊樣式表）子屬性來實現。
語法
用於實現篩選 jQuery 中子元素的語法是。
$(parentElement).children(childProperty);
parentElement - 在上面的語法中，父元素可以稱為包含多個子元素的主容器。例如，div 容器、無序列表或有序列表容器可以稱為其內部列表子元素的父元素。
children() - 這是 jQuery 的一個預定義方法，它接受一個字串型別的單個引數，該引數返回任何元素的子元素總數，並根據作為引數傳遞給該方法的條件對其進行篩選。
childProperty - 上述語法中的子屬性稱為 CSS 子屬性，用於選擇被子屬性選擇的第 n 個元素。開發人員廣泛使用的一些子屬性是
:nth−child() - 在此屬性中，它以 'n' 作為輸入，選擇父元素中所有子元素的數量。例如，如果我們將屬性中的值傳遞為 :nth−child(2n)，則它將返回所有偶數位置的子元素；或者如果我們將引數中的值傳遞為 :nth−child(3)，則它將返回該特定子元素。
:first−child - 在此子屬性中，它返回父元素的第一個子元素。
:last−child - 在此子屬性中，它返回父元素的最後一個子元素。
演算法
步驟 1 - 在任何文字編輯器（如 Sublime 編輯器或 VS Code）中建立一個檔案，並將檔名命名為 index.html 並儲存。
步驟 2 - 現在將 HTML 基本結構新增到檔案中。
步驟 3 - 現在將 jQuery CDN（內容分發網路）新增到 HTML 的 head 標籤中，以便在檔案中使用 jQuery 功能。
<script src="https://code.jquery.com/jquery-3.5.0.js"> </script>
步驟 4 - 現在在 body 標籤內建立一個無序列表標籤，並建立一些子元素作為列表 '<li>'.
<ul> <li>Child 1</li> <li>Child 2</li> <li>Child 3</li> <li>Child 4</li> <li>Child 5</li> </ul>
步驟 5 - 現在在關閉無序列表標籤後建立一個 script 標籤。
<script> </script>
步驟 6 - 現在使用 jQuery 選擇器在程式載入時準備一個函式。
$(document).ready(() => {
})
步驟 7 - 使用選擇器語法選擇父元素。
$('ul')
步驟 8 - 現在使用 jQuery children() 方法獲取父元素的子元素，並將子屬性條件作為 ":nth-child(2n)" 傳遞給 children 方法。
$('ul').children(':nth-child(2n)')
步驟 9 - 現在在 style 標籤內建立一個 '.select' 類併為其新增樣式。
<style>
.select {
background-color: green;
display: inline-block;
color: white;
padding: 0.2rem;
}
</style>
步驟 10 - 現在新增 addClass() 方法以指示篩選的子元素，並將上面在 style 標籤中建立的類傳遞給它。
$('ul').children(':nth-child(2n)').addClass("select");
步驟 11 - 程式已準備好根據 children 方法中給定的條件篩選子元素的數量。
示例
在此示例中，我們將從父元素中篩選出某種型別的子元素。為此，我們建立了一個父元素作為無序列表，它充當父元素，並在其中我們將建立一些列表標籤，這些標籤將充當該元素的子元素。為此，我們將使用 children() 方法並篩選出父元素中的子元素。為了指示篩選的子元素，我們已將樣式新增到篩選的子元素中。
<html>
<head>
<title> filter children of any element </title>
<style>
.select {
background-color: green;
display: inline-block;
color: white;
padding: 0.2rem;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"> </script>
</head>
<body>
<h3>Below given are child of parent element: </h3>
<ul style="list-style: none;">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
<li>Child 5</li>
</ul>
<script>
$(document).ready(() => {
$('ul').children(':nth-child(2n)').addClass("select");
})
</script>
</body>
</html>
下圖顯示了上述示例的輸出，其中當上述程式在瀏覽器中載入時，它將在瀏覽器視窗中顯示多個子元素，如子元素 1、子元素 2、子元素 3、子元素 4 和子元素 5。因為我們已將 nth−child() 的條件設定為 '2n'，它將返回所有位於偶數位置的子元素，並將這些子元素指示為綠色背景。
結論
此功能用於任何現代應用程式中篩選資料，選擇要對其執行某些操作的特定數量的選定資料。此類功能也可用於員工管理系統，因為員工資訊以子元素的形式儲存，如果管理員希望根據任何員工的特定條件（如姓名）篩選資料，則可以使用上述功能。我們可以透過新增輸入框來建立此動態功能，使用者可以在其中輸入資料。
196 次瀏覽
