資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用 jQuery 獲取包含最接近的父元素（匹配指定選擇器）的元素？
操作 DOM 是 Web 開發的重要組成部分，而 jQuery 是一個流行的庫，它可以輕鬆遍歷 HTML DOM 樹，並根據元素與其他元素的關係來選擇或修改元素。在這篇博文中，我們將探討如何使用 jQuery 獲取或設定元素，這些元素包含最接近的父元素，並且該父元素匹配指定的選擇器。
使用 closest() 方法
jQuery 中的 closest() 方法用於獲取第一個匹配指定選擇器的元素，它會搜尋元素本身及其在 DOM 樹中的祖先。以下是一個演示如何使用 closest() 方法的示例：
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
</div>
</div>
<script>
$(document).ready(function() {
var closestAncestor = $('.myClass').closest('div');
console.log(closestAncestor);
});
</script>
</body>
</html>
在這個例子中，我們有一個包含 p 元素和另一個具有 "myClass" 類的 div 元素的 div 元素，該 div 元素包含另一個 p 元素。我們使用 closest() 方法來獲取具有 "myClass" 類的 div 元素的最接近的 div 祖先元素。closestAncestor 變數將包含選定的 div 元素。
使用 parentsUntil() 方法
jQuery 中的 parentsUntil() 方法用於獲取選定元素與匹配指定選擇器的元素之間的所有祖先元素。以下是一個演示如何使用 parentsUntil() 方法的示例：
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
</div>
</div>
<script>
$(document).ready(function() {
var ancestorElements = $('.myClass').parentsUntil('div');
console.log(ancestorElements);
});
</script>
</body>
</html>
在這個例子中，我們選擇具有 "myClass" 類的元素，然後使用 parentsUntil() 方法獲取它與第一個 div 元素之間的所有祖先元素。ancestorElements 變數將包含所有選定的祖先元素。
使用 find() 方法
jQuery 中的 find() 方法用於選擇選定元素的所有後代元素（匹配指定的選擇器）。以下是一個演示如何使用 find() 方法選擇最接近的父元素內的元素的示例：
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
<span>Some more text</span>
</div>
</div>
<script>
$(document).ready(function() {
var descendants = $('.myClass').find('span');
console.log(descendants);
});
</script>
</body>
</html>
在這個例子中，我們選擇具有 "myClass" 類的 div 元素，然後使用 find() 方法選擇其中的所有 span 元素。descendants 變數將包含所有選定的後代元素。
使用 children() 方法
jQuery 中的 children() 方法用於選擇選定元素的所有直接子元素（匹配指定的選擇器）。以下是一個演示如何使用 children() 方法的示例：
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
<span>Some more text</span>
</div>
</div>
<script>
$(document).ready(function() {
var childrenElements = $('.myClass').children('p');
console.log(childrenElements);
});
</script>
</body>
</html>
在這個例子中，我們選擇具有 "myClass" 類的 div 元素，然後使用 children() 方法選擇其所有直接子 p 元素。childrenElements 變數將包含所有選定的子元素。
使用 siblings() 方法
jQuery 中的 siblings() 方法用於選擇選定元素的所有同級元素（匹配指定的選擇器）。以下是一個演示如何使用 siblings() 方法的示例。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>This is some text.</p>
<div class="myClass">
<p>This is some more text.</p>
</div>
<p>Even more text.</p>
</div>
<script>
$(document).ready(function() {
var siblingElements = $('.myClass').siblings('p');
console.log(siblingElements);
});
</script>
</body>
</html>
在這個例子中，我們選擇具有 "myClass" 類的 div 元素，然後使用 siblings() 方法選擇其所有同級 p 元素。siblingElements 變數將包含所有選定的同級元素。
使用 prev() 和 next() 方法
jQuery 中的 prev() 和 next() 方法用於選擇選定元素的前一個和後一個同級元素（匹配指定的選擇器）。以下是一個演示如何使用 prev() 和 next() 方法的示例：
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Get/Set Closest Parent Element Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
<p>Some text.</p>
<div class="myClass">
<p>Some more text.</p>
</div>
<p>Even more text.</p>
</div>
<script>
$(document).ready(function() {
var prevElement = $('.myClass').prev('p');
var nextElement = $('.myClass').next('p');
console.log(prevElement);
console.log(nextElement);
});
</script>
</body>
</html>
在這個例子中，我們選擇具有 "myClass" 類的 div 元素，然後使用 prev() 方法選擇前一個 p 元素，使用 next() 方法選擇後一個 p 元素。prevElement 和 nextElement 變數將包含選定的元素。
使用 index() 方法
index() 方法是另一個有用的 jQuery 方法，可用於根據元素在頁面上與其他元素的關係來選擇元素。此方法返回選定元素在其同級元素中的索引位置。
考慮以下 HTML 程式碼：
<div> <p>First</p> <p>Second</p> <p class="selected">Third</p> <p>Fourth</p> <p>Fifth</p> </div>
要獲取具有 "selected" 類的 p 元素的索引位置，可以使用以下程式碼：
var selectedIndex = $('p.selected').index();
console.log(selectedIndex);
index() 方法返回一個基於零的索引，因此在這個例子中，輸出將為 2，因為具有 "selected" 類的 p 元素是其父 div 中的第三個 p 元素。
我們還可以使用 index() 方法根據其索引位置選擇特定的同級元素。例如，要選擇 div 中的第二個 p 元素，可以使用以下程式碼：
var secondElement = $('div p').eq(1);
console.log(secondElement);
eq() 方法用於根據其索引位置選擇特定元素。在這個例子中，我們傳遞 1 作為引數給 eq() 來選擇第二個 p 元素。
組合使用 index() 和 eq() 方法可以成為選擇和操作頁面上元素的強大方法。
結論
在這篇博文中，我們探討了如何使用 jQuery 獲取和設定包含最接近的父元素（匹配指定選擇器）的元素。我們討論瞭如何使用 closest() 方法選擇最接近的匹配父元素，並且還探討了其他可以用於根據元素在頁面上與其他元素的關係來選擇元素的 jQuery 方法。透過掌握這些技術，你將能夠輕鬆操作 DOM 並建立對使用者互動做出響應的動態網頁。
85 次瀏覽
