prev() 函数被用来匹配元素集的前一个兄弟元素,仅仅只有前一个兄弟元素被选择,其子元素将被忽略。
prev() 函数可以允许通过选择器来过滤,例如 prev(‘div’) 被用来选择匹配元素的前一个元素是兄弟元素的div元素。
具体实例代码:
<html>
<head>
<title>
prev() example
</title>
<style type="text/css">
div,p{
width:110px;
height:40px;
margin:2px 8px 2px 8px;
float : left;
border:1px blue solid;
}
</style>
<script type="text/javascript" src="../jquery-1.11.1.min.js">
</script>
</head>
<body>
<h1>jquery prev() example</h1>
<div>
this is div 1
<div>div 1 child</div>
</div>
<p>this is paragraph 1</p>
<div>
this is div 2
<div>div 2 child</div>
</div>
<div id="start"> this is div 3
<div>div 3 child</div>
</div>
<br/><br/><br/>
<br/><br/>
<button id="prevButton1">prev()</button>
<button id="prevButton2">prev("div")</button>
<button id="prevButton3">prev("p")</button>
<button id="reset">Reset</button>
<script type="text/javascript">
var $currElement=$("#start");
$currElement.css("background","red");
$("#prevButton1").click(function(){
if(!$currElement.prev().length){
alert("no element found");
return false;
}
$currElement=$currElement.prev();
$("div,p").css("background","");
$currElement.css("background","red");
});
$("#prevButton2").click(function(){
if(!$currElement.prev("div").length){
alert("no element found");
return false;
}
$currElement=$currElement.prev("div")
$("div,p").css("background","");
$currElement.css("background","red")
});
$("#prevButton3").click(function(){
if(!$currElement.prev('p').length){
alert("no element found");
return false;
}
$currElement=$currElement.prev('p');
$("div,p").css("background","");
$currElement.css("background","red");
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>
效果: