如何使用 jQuery 过滤任意元素的子元素?
概述
jQuery 是一个优秀的 JavaScript 库，它包含许多预构建的方法，可以帮助我们无需编写大量代码即可执行某些功能。jQuery 中的元素可以被视为任何 HTML 元素，它是另一个元素的父元素。因此，元素内部的元素也称为该元素的子元素，而子元素所在的容器称为父元素。因此，使用 jQuery 过滤任意元素的子元素，可以通过 jQuery children() 方法和 CSS(层叠样式表)的 child 属性来实现。
语法
在 jQuery 中过滤子元素的语法如下。
$(parentElement).children(childProperty);
parentElement − 在上述语法中，父元素可以称为包含多个子元素的主容器。例如，div 容器、无序列表或有序列表容器可以称为其内部子元素列表的父元素。
children() − 这是 jQuery 的一个预定义方法，它接受一个字符串类型的属性作为参数，返回任何元素的子元素总数，并根据方法中作为参数传递的条件进行筛选。
childProperty − 在上述语法中，child 属性称为 CSS 子属性，用于选择由 child 属性选择的第 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>
步骤 6 - 现在使用 jQuery 选择器在程序加载时准备一个函数。
$(document).ready(() => {
})
步骤 7 - 使用选择器语法选择父元素。
$('ul')
步骤 8 - 现在使用 jQuery children() 方法获取父元素的子元素，并将 child 属性条件作为 ":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"，它将返回所有位于偶数位置的子项，并将这些子项显示为绿色背景。
结论
此功能在任何现代应用程序中都用于筛选数据，选择一定数量的选定数据并对其执行特定操作。此类功能也可用于员工管理系统，因为员工信息存储在 children 表单中，如果管理员想要根据特定条件(例如姓名)筛选任何员工的数据，则可以使用上述功能。我们可以通过添加可输入数据的输入框来动态创建此功能。
