jQuery 공작소 : .prev()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
prev 메서드는 지정된 요소 기준으로 동등한 앞 요소를 찾습니다.
예제 1
기본 예제
보기
얼굴을 눌러보세요 ! 그 앞의 얼굴이 '깜놀' 할겁니다.
소스
<style type="text/css">
.css_test {
text-align : center;
}
.css_test img {
cursor : pointer;
width : 70px;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<br>
<br>얼굴을 눌러보세요 ! 그 앞의 얼굴이 '깜놀' 할겁니다.<br>
</div>
<script type="text/javascript">
function j_test(o){
$(o).prev().attr( 'src', '//superkts.com/img/huk2.gif' ); // 클릭한 것의 다음것 변경
setTimeout(function(){ // 0.5초 후 다시 원복
$(o).prev().attr( 'src', '//superkts.com/img/huk1.gif' );
}, 500);
}
</script>
.css_test {
text-align : center;
}
.css_test img {
cursor : pointer;
width : 70px;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<br>
<br>얼굴을 눌러보세요 ! 그 앞의 얼굴이 '깜놀' 할겁니다.<br>
</div>
<script type="text/javascript">
function j_test(o){
$(o).prev().attr( 'src', '//superkts.com/img/huk2.gif' ); // 클릭한 것의 다음것 변경
setTimeout(function(){ // 0.5초 후 다시 원복
$(o).prev().attr( 'src', '//superkts.com/img/huk1.gif' );
}, 500);
}
</script>
관련 CSS
jQuery
- 이 예제는 클릭한 얼굴의 이전 얼굴 표정을 바꿔보는 예제입니다.
- 첫 번째 얼굴은 이전에 해당하는것이 없습니다.
$( '셀렉터' ).prev() - 해당 셀렉터 이전것을 찾습니다.
$( '셀렉터' ).prev().attr( 'src', '값' ) - 셀렉터로 찾은 이전것의 src 속성을 지정된 값으로 바꿔줍니다.
예제 2
prev 메서드는 동등한 관계에서 다음것을 찾습니다
보기
얼굴을 눌러보세요 ! 그 앞의 얼굴이 '깜놀' 할겁니다.
위의 네모칸 밖의 처음 얼굴과, 아래 네모칸 안쪽 첫번째 얼굴을 주의깊게 눌러보세요.
빨간색 네모 얼굴은 눌러도 앞의 얼굴이 반응하지 않습니다.
소스
<style type="text/css">
.css_test {
text-align : center;
}
.css_test img {
cursor : pointer;
width : 60px;
}
.css_test div {
border-radius : 5px;
border : 5px solid gray;
display : inline-block;
padding : 5px;
}
.css_test .notice {
border : 1px solid red;
}
</style>
<div class="css_test">
<div>
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
</div>
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" class="notice" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<br><br>
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<div>
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" class="notice" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
</div>
<br>
<br>얼굴을 눌러보세요 ! 그 앞의 얼굴이 '깜놀' 할겁니다.
<br>위의 네모칸 밖의 처음 얼굴과, 아래 네모칸 안쪽 첫번째 얼굴을 주의깊게 눌러보세요.
<br>빨간색 네모 얼굴은 눌러도 앞의 얼굴이 반응하지 않습니다.
</div>
<script type="text/javascript">
function j_test(o){
$(o).prev().attr('src', '//superkts.com/img/huk2.gif'); // 클릭한 것의 다음것 변경
setTimeout(function(){ // 0.5초후 다시 원복
$(o).prev().attr('src', '//superkts.com/img/huk1.gif');
}, 500);
}
</script>
.css_test {
text-align : center;
}
.css_test img {
cursor : pointer;
width : 60px;
}
.css_test div {
border-radius : 5px;
border : 5px solid gray;
display : inline-block;
padding : 5px;
}
.css_test .notice {
border : 1px solid red;
}
</style>
<div class="css_test">
<div>
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
</div>
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" class="notice" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<br><br>
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<div>
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" class="notice" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
</div>
<br>
<br>얼굴을 눌러보세요 ! 그 앞의 얼굴이 '깜놀' 할겁니다.
<br>위의 네모칸 밖의 처음 얼굴과, 아래 네모칸 안쪽 첫번째 얼굴을 주의깊게 눌러보세요.
<br>빨간색 네모 얼굴은 눌러도 앞의 얼굴이 반응하지 않습니다.
</div>
<script type="text/javascript">
function j_test(o){
$(o).prev().attr('src', '//superkts.com/img/huk2.gif'); // 클릭한 것의 다음것 변경
setTimeout(function(){ // 0.5초후 다시 원복
$(o).prev().attr('src', '//superkts.com/img/huk1.gif');
}, 500);
}
</script>
관련 CSS
jQuery
- 위쪽 빨간 네모칸 얼굴은 눌러도 앞쪽의 얼굴은 표정의 변화가 없습니다.
- 아래쪽 빨간 네모칸 얼굴을 눌러도 앞쪽의 얼굴도 변화가 없습니다.
- 이렇게 prev 메서드는 동등한 관계의 것만 찾습니다. 부모나 자식 요소는 대상이 아닙니다.
심화학습
- 위쪽 빨간 네모칸의 얼굴에서 prev 는 동등한 위치의 이전 태그인 div(회색 네모칸)을 찾습니다.
- 이 div 는 얼굴들을 감싸고 있는 회색 네모칸 인데요 src 속성을 적용해도 변화가 없습니다.
- 결론 : DIV 를 찾았지만 딱히 할 게 없었다 입니다. 찾지 못한것은 아닙니다.
- 빨간 네모 이미지와 그 이전의 네모칸은 동등한 관계이니까요.
- 헷갈리면 안될 부분 : 네모칸(DIV)을 찾은것이지 네모칸 안의 마지막 얼굴을 찾은것이 아닙니다.
- 아랫쪽 빨간 네모칸의 얼굴기준으로 prev 메서드는 아무것도 찾지 않습니다.
허억
예제 3
prev 메소드 여러개를 사용한다면?
보기
얼굴을 눌러보세요 ! 그 이전 이전 얼굴이 '깜놀' 할겁니다.
소스
<style type="text/css">
.css_test {
text-align : center;
}
.css_test img {
cursor : pointer;
width : 60px;
}
.css_test div {
border-radius : 5px;
border : 5px solid gray;
display : inline-block;
padding : 5px;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<br>
<br>얼굴을 눌러보세요 ! 그 이전 이전 얼굴이 '깜놀' 할겁니다.<br>
</div>
<script type="text/javascript">
function j_test(o){
$(o).prev().prev().attr('src', '//superkts.com/img/huk2.gif'); // 클릭한 것의 다음것 변경
setTimeout(function(){ // 0.5초후 다시 원복
$(o).prev().prev().attr('src', '//superkts.com/img/huk1.gif');
}, 500);
}
</script>
.css_test {
text-align : center;
}
.css_test img {
cursor : pointer;
width : 60px;
}
.css_test div {
border-radius : 5px;
border : 5px solid gray;
display : inline-block;
padding : 5px;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<img src="//superkts.com/img/huk1.gif" onclick="j_test(this)" />
<br>
<br>얼굴을 눌러보세요 ! 그 이전 이전 얼굴이 '깜놀' 할겁니다.<br>
</div>
<script type="text/javascript">
function j_test(o){
$(o).prev().prev().attr('src', '//superkts.com/img/huk2.gif'); // 클릭한 것의 다음것 변경
setTimeout(function(){ // 0.5초후 다시 원복
$(o).prev().prev().attr('src', '//superkts.com/img/huk1.gif');
}, 500);
}
</script>
관련 CSS
jQuery
- 첫번째 두번째 얼굴은 찾을 대상이 없습니다.
$( '셀렉터' ).prev().prev() - 셀렉터로 찾은 요소의 이전 이전것 찾기
$( '셀렉터' ).prev().prev().prev() ...
+ 관련 jQuery +
jQuery 홈페이지 .prev() API 문서 : https://api.jquery.com/prev/