如何使用 jQuery 查找所有具有指定类的子元素?
概述
JQuery 是一个库，包含各种预定义方法及其特定功能。因此，可以使用 JQuery children() 方法获取所有包含特定类及其标签的子元素。JQuery children() 方法接受一个参数作为返回数据集的条件。由于我们想要查找所有具有指定类的子元素，因此我们将在方法中传递类名作为参数，以查找所有特定的类。
语法
此方法使用的语法是 −
$(element).children(className);
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 标签创建一个按钮，并设置值过滤器，用于指示指定的子类。
<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 − 现在在 HTML 正文中添加一个 script 标签。
<script></script>
步骤 7 - 现在创建一个 JQuery 箭头函数，其中包含 click 函数和按钮作为选择器，该选择器触发一个函数来查找指定类的子元素。
$('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 容器子元素的动物列表。点击按钮后，将显示具有指定类别属性的动物列表，该属性可以在第二张图中看到。我们指定了两个类别。第一个是"水生类"，以海蓝宝石色显示;另一个是"陆地类"，以黄色显示。
结论
上述功能可用于区分不同类型的数据。我们在此功能中使用了 children() 方法，该方法接受字符串类型的数据作为参数，并将指定的类别存储在对象数据类型中。我们可以使用此方法在管理 Web 应用程序中管理不同类型的角色。请务必检查是否已在 head 标签中添加 Jquery 的 CDN 链接以使此功能正常运行，因为此处使用的方法需要以任何方式导入 Jquery。
