next()函数用于获取匹配元素集中的紧随其后的同级元素。 仅选择以下同级元素,其子元素将被忽略。
此next()函数允许通过“选择器”对其进行过滤。 例如,next('div')用于获取紧随其后的兄弟元素,这些元素仅是<div>元素。
jQuery next()示例
<html>
<head>
<style type="text/css">
div,p {
width:110px;
height:40px;
margin:2px 8px 64px 8px;
float:left;
border:1px blue solid;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery next() example</h1>
<div id="start">This is div 1
<div>div 1 child</div>
</div>
<p>This is paragrah 1</p>
<div>This is div 2
<div>div 2 child</div>
</div>
<div>This is div 3
<div>div 3 child</div>
</div>
<br/><br/><br/>
<br/><br/><br/>
<button id="nextButton1">next()</button>
<button id="nextButton2">next('div')</button>
<button id="nextButton3">next('p')</button>
<button id="reset">Reset</button>
<script type="text/javascript">
var $currElement = $("#start");
$currElement.css("background", "red");
$("#nextButton1").click(function () {
if(!$currElement.next().length){
alert("No element found!");
return false;
}
$currElement = $currElement.next();
$("div,p").css("background", "");
$currElement.css("background", "red");
});
$("#nextButton2").click(function () {
if(!$currElement.next('div').length){
alert("No element found!");
return false;
}
$currElement = $currElement.next('div');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
$("#nextButton3").click(function () {
if(!$currElement.next('p').length){
alert("No element found!");
return false;
}
$currElement = $currElement.next('p');
$("div,p").css("background", "");
$currElement.css("background", "red");
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>