prev() 函数被用来匹配元素集的前一个兄弟元素,仅仅只有前一个兄弟元素被选择,其子元素将被忽略。
prev() 函数可以允许通过选择器来过滤,例如 prev(‘p’) 被用来选择匹配元素的前一个元素是兄弟元素的p元素。
具体实例代码:
<html>
<head>
<title>
prev() example
</title>
<style type="text/css">
p,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>
<p>
this is p 1
<p>p 1 child</p>
</p>
<p>this is paragraph 1</p>
<p>
this is p 2
<p>p 2 child</p>
</p>
<p id="start"> this is p 3
<p>p 3 child</p>
</p>
<br/><br/><br/>
<br/><br/>
<button id="prevbutton1">prev()</button>
<button id="prevbutton2">prev("p")</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();
$("p,p").css("background","");
$currelement.css("background","red");
});
$("#prevbutton2").click(function(){
if(!$currelement.prev("p").length){
alert("no element found");
return false;
}
$currelement=$currelement.prev("p")
$("p,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');
$("p,p").css("background","");
$currelement.css("background","red");
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>
效果:
以上就是jquery prev 函数实例的详细内容。