jquery 이전 함수 예제
- 巴扎黑원래의
- 2017-06-30 14:05:201793검색
prev() function은 요소 세트의 이전 형제 요소를 일치시키는 데 사용됩니다. 이전 형제 요소만 선택되고 해당 하위 요소는 무시됩니다.
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 이전 함수 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery의 prev() 메소드 사용 예다음 기사：jQuery의 prev() 메소드 사용 예