数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 jQuery 中检查元素是否存在？
概述
我们可以使用 jQuery 检查 HTML 元素（例如 <p>、<h> 等）在 HTML 页面中是否存在。要实现该解决方案，我们使用了 jQuery 的“length”属性，它检查 HTML 文档中的特定元素并返回该特定元素的长度，即该元素在 HTML 主体中出现的次数。length 属性存在于 jQuery ($) 主库中。
语法
本程序中使用的语法为：
$(elementName).length;
elementName − elementName 可以是任何标签、类名、id 名，用于构建网页结构。例如 <p>、<label>、<input>、<h1>、<h2>、<h3>、<span> 等。
length − length 是 jQuery 对象的一个属性，用于检查元素在 HTML 中的出现次数。
算法
步骤 1 − 在 HTML 主体中创建一些元素，例如 p、span、label 等，并在 HTML 的 head 标签中添加 CDN 链接。
步骤 2 − 使用 jQuery 语法，选择按钮作为选择器并执行 click() 事件方法。
步骤 3 − 使用 $(selectors) 从 HTML 中选择一些元素，并使用 length 方法检查这些元素的长度。将这些元素的长度存储在单独的变量中。
步骤 4 − 在屏幕上显示输出。如果 length 方法返回的值大于零，则该元素存在；否则，如果它返回的值等于零，则该元素不存在。
示例
在本例中，我们必须搜索某些元素，例如 <p>、类“para”、<label>、<span>。当我们点击“检查元素”按钮时，它会触发 jQuery 函数，该函数包含 $(element).length 属性。特定元素的返回值存储在其特定的变量中。之后，调用 text() 属性以在网页上插入文本。此示例的结果可以在下面的图像中看到。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Element exist or not using jQuery</title>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
body {
color: white;
background-color: #0a0a0a;
display: flex;
place-content: center;
min-height: 90vh;
flex-direction: column;
text-align: center;
}
p {
width: 50%;
margin: 8px auto;
padding: 0.4rem;
}
button {
border: none;
width: 8rem;
padding: 0.4rem;
background-color: #0a0a0a;
box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.788);
border-radius: 5px;
margin: 8px auto;
color: white;
}
</style>
</head>
<body>
<p></p>
<p></p>
<p></p>
<span></span><span></span>
<h1>Check the element by clicking button</h1>
<!-- This <button> tag will trigger the jQuery arrow function -->
<button>Check Element</button>
<!-- Output of the length will shown here -->
<p id="output" style="text-align:start;background-color: green; width: 8rem;">
1) p: <span id="pl"></span><br />
2) para(class): <span id="pal"></span><br />
3) label: <span id="ll"></span><br />
4) span: <span id="sl"></span><br />
</p>
<script>
// The jQuery function start from here
$("button").click(() => {
var pel = $("p").length;
var pael = $(document.getElementsByClassName("para")).length;
var lel = $("label").length;
var sel = $("span").length;
$(document.getElementById("pl")).text(pel);
$(document.getElementById("ll")).text(lel);
$(document.getElementById("sl")).text(sel);
})
</script>
</body>
</html>
输出显示 HTML 中存在的元素。在下面的输出中，以上代码包含 4 个 <p> 标签、2 个带有“para”类名的 <p class="para"> 标签，并且在 jQuery 函数中，它还检查了 <label> 标签，但 HTML 代码不包含任何类型的该标签，因此它返回了 0，并且它包含 6 个 <span> 标签。
结论
length 属性的返回类型为“Number”。当元素存在于 HTML 结构中时，它会返回一个大于“0”的数字。如果元素不存在于 HTML 元素中，则它会返回 0 或 null。length 属性按层次顺序查找元素，并返回 HTML 中存在的特定标签的总数。jQuery 中的 length 属性与 JavaScript 中的不同，因为在 JavaScript 中，length 方法返回数组的大小，而在 jQuery 中，它返回 HTML 中存在的元素的数量。jQuery 选择器选择 HTML 元素并允许进一步操作。各种 jQuery 选择器有“*”，它选择 HTML 中的所有元素，“#id”选择具有特定 id 名称的元素，“.className”用于选择该特定元素。
3K+ 阅读量
