jQuery 遍历同级兄弟元素
在本教程中，您将学习如何使用 jQuery 在 DOM 树中横向遍历。
在 DOM 树中横向遍历
在逻辑关系中，兄弟元素是那些共享同一个父元素的元素。
jQuery 提供了多种方法，例如 siblings(), next(), nextAll(), nextUntil(), prev(), prevAll() 和 prevUntil()，您可以使用这些方法在 DOM 树中横向遍历。
jQuery siblings() 方法
jQuery siblings() 方法用于获取被选元素的兄弟元素。
下面的示例将通过在文档就绪时添加类 .highlight 来突出显示 <p> 元素的兄弟元素，即 <h1> 和 <ul>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").siblings().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>您可以选择在 siblings() 方法中包含一个或多个选择器作为参数，以过滤对同级的搜索。 以下示例将仅在 <p> 的兄弟元素周围应用边框，这些兄弟元素是 <ul> 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery siblings() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").siblings("ul").addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>jQuery next() 方法
jQuery next() 方法用于获取紧随其后的兄弟元素，即所选元素的下一个兄弟元素。 以下示例将突出显示 <p> 元素的下一个兄弟元素，即 <ul> 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery next() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").next().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>jQuery nextAll() 方法
jQuery nextAll() 方法用于获取所选元素的所有后续兄弟。
下面的示例将突出显示它旁边的 <p> 元素的所有兄弟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextAll() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("p").nextAll().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>jQuery nextUntil() 方法
jQuery nextUntil() 方法用于获取以下所有兄弟元素，但不包括选择器匹配的元素。 简单来说，我们可以说它返回 DOM 层次结构中两个给定元素之间的所有下一个兄弟元素。
以下示例将突出显示 <h1> 元素的所有以下兄弟元素，不包括 <ul> 元素，即突出显示 <p> 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery nextUntil() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("h1").nextUntil("ul").addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>jQuery prev() 方法
jQuery prev() 方法用于获取前一个兄弟元素，即被选元素的前一个兄弟元素。 以下示例将突出显示 <ul> 元素的前一个兄弟元素，即 <p> 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prev() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul").prev().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>jQuery prevAll() 方法
jQuery prevAll() 方法用于获取所选元素的所有先前兄弟。
以下示例将突出显示在此之前出现的 <ul> 元素的所有同级。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevAll() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul").prevAll().addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>jQuery prevUntil() 方法
jQuery prevUntil() 方法用于获取所有前面的兄弟元素，但不包括选择器匹配的元素。 简单来说，我们可以说它返回 DOM 层次结构中两个给定元素之间的所有先前兄弟元素。
以下示例将突出显示除 <h1> 元素之外的 <ul> 元素的所有先前兄弟元素，即突出显示 <p> 元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prevUntil() Demo</title>
<style>
.highlight{
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("ul").prevUntil("h1").addClass("highlight");
});
</script>
</head>
<body>
<div class="container">
<h1>Hello World</h1>
<p>This is a <em>simple paragraph</em>.</p>
<p>This is another paragraph.</p>
<ul>
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
</body>
</html>Advertisements