jQuery 공작소 : .prevAll()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
prevAll 메서드는 지정한 것 이전의 요소들을 찾습니다.
예제 1
지정한 순서의 이미지 이후부터 전부 찾기
보기
클릭한 얼굴의 이전(왼쪽) 얼굴들이 반응합니다. 얼굴을 클릭해 보세요 ^^
소스
<style type="text/css">
.css_test {
border : 5px solid gray;
border-radius : 5px;
padding : 5px;
}
</style>
클릭한 얼굴의 이전(왼쪽) 얼굴들이 반응합니다. 얼굴을 클릭해 보세요 ^^<br><br>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
</div>
<script type="text/javascript">
// 이미지에 클릭이벤트 생성 - 클릭한 요소를 매개변수로 하여 j_test 함수를 호출
$('.css_test img').bind( 'click', function(){ j_test(this) } ).css( 'cursor', 'pointer' );
function j_test(o){
// 보기 편하게 여러줄로 코딩
$( o )
.prevAll() // 이전 전부
.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
$( '.css_test img' ).attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
.css_test {
border : 5px solid gray;
border-radius : 5px;
padding : 5px;
}
</style>
클릭한 얼굴의 이전(왼쪽) 얼굴들이 반응합니다. 얼굴을 클릭해 보세요 ^^<br><br>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
</div>
<script type="text/javascript">
// 이미지에 클릭이벤트 생성 - 클릭한 요소를 매개변수로 하여 j_test 함수를 호출
$('.css_test img').bind( 'click', function(){ j_test(this) } ).css( 'cursor', 'pointer' );
function j_test(o){
// 보기 편하게 여러줄로 코딩
$( o )
.prevAll() // 이전 전부
.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
$( '.css_test img' ).attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
관련 CSS
jQuery
$( 셀렉터 ).prevAll() - 셀렉터에 해당하는 요소의 이전 요소들 찾기
예제 2
클릭한 대상도 포함하기, add 메서드 활용
보기
클릭한 얼굴의 이전(왼쪽) 얼굴들이 반응합니다. 얼굴을 클릭해 보세요 ^^
소스
<style type="text/css">
.css_test {
border : 5px solid gray;
border-radius : 5px;
padding : 5px;
}
</style>
클릭한 얼굴의 이전(왼쪽) 얼굴들이 반응합니다. 얼굴을 클릭해 보세요 ^^<br><br>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
</div>
<script type="text/javascript">
// 이미지에 클릭이벤트 생성 - 클릭한 요소를 매개변수로 하여 j_test 함수를 호출
$('.css_test img').bind( 'click', function(){ j_test(this) } ).css( 'cursor', 'pointer' );
function j_test(o){
// 보기 편하게 여러줄로 코딩
$( o )
.prevAll() // 이전 전부
.add( o ) // 클릭한 이미지도 추가로 포함시킴
.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
$( '.css_test img' ).attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
.css_test {
border : 5px solid gray;
border-radius : 5px;
padding : 5px;
}
</style>
클릭한 얼굴의 이전(왼쪽) 얼굴들이 반응합니다. 얼굴을 클릭해 보세요 ^^<br><br>
<div class="css_test">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
<img src="//superkts.com/img/huk1.gif">
</div>
<script type="text/javascript">
// 이미지에 클릭이벤트 생성 - 클릭한 요소를 매개변수로 하여 j_test 함수를 호출
$('.css_test img').bind( 'click', function(){ j_test(this) } ).css( 'cursor', 'pointer' );
function j_test(o){
// 보기 편하게 여러줄로 코딩
$( o )
.prevAll() // 이전 전부
.add( o ) // 클릭한 이미지도 추가로 포함시킴
.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
$( '.css_test img' ).attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
관련 CSS
jQuery
jQuery 홈페이지 .prevAll() API 문서 : http://api.jquery.com/prevAll/