資料結構
網路
關係型資料庫管理系統
作業系統
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.com/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+ 閱讀量
