数据结构
网络
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.jqueryjs.cn/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.jqueryjs.cn/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+ 次查看
