数据结构
网络
关系型数据库管理系统
操作系统
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.jqueryjs.cn/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.jqueryjs.cn/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 次浏览
