jQuery nextAll() 方法用于返回指定选择器的所有下一个兄弟元素。它是 jQuery 中的内置方法。此方法与 DOM 元素的下一个兄弟元素一起向前遍历。
语法
selector.nextAll( filter )
filter: filter是可选参数,它指定了一个选择器表达式,用于缩小对下一个兄弟的搜索范围。为了返回多个兄弟,我们可以用逗号分隔每个表达式。例子
例1
<!DOCTYPE html>
<html>
<head>
<title> jQuery nextAll() 方法 </title>
<style>
.main * {
display: block;
border: 2px solid black;
padding: 10px;
margin: 15px;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
$("p").nextAll().css({"color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>
<body class = "main"> body
<div id = "div1"> div 元素
<p> p 元素1 </p>
<p> p 元素2 </p>
<ul> ul 元素 </ul>
<h2> h2 </h2>
</div>
<button onclick = "fun()"> 点击看看 </button>
</body>
</html>
例2
<!DOCTYPE html>
<html>
<head>
<style>
.main * {
display: block;
border: 2px solid black;
padding: 10px;
margin: 15px;
}
</style>
<script src = "https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
$("h2").nextAll("p").css({ "color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>
<body class = "main"> body
<div id = "div1"> div
<h2> h2 </h2>
<p> p 1 </p>
<span> span </span>
<p> p 2</p>
<ul> ul </ul>
<p> p 3 </p>
</div>
<button onclick = "fun()"> click me </button>
</body>
</html>