jQuery 공작소 : .nextUntil()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
nextUntil 메서드는 지정한것 이후부터 이전까지 대상으로 찾습니다.
예제 1
지정한 순서의 이미지 이후부터 전부 찾기
보기
군대 내무반 입니다. 분대장이 화가났네요. (왼쪽부터 계급이 높습니다)
분대장은 왼쪽에서 두번째 입니다.
분대장은 왼쪽에서 두번째 입니다.
소스
<style type="text/css">
.css_test {
border : 5px solid gray;
border-radius : 5px;
padding : 5px;
}
</style>
군대 내무반 입니다. 분대장이 화가났네요. (왼쪽부터 계급이 높습니다)<br>
분대장은 왼쪽에서 두번째 입니다.<br><br>
<button type="button" onclick="j_test()">내 밑으로 막내 빼고 전부 주목 !!</button>
<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">
</div>
<script type="text/javascript">
function j_test(){
// 보기 편하게 여러줄로 코딩
$( '.css_test img:eq(1)' )
.nextUntil( $( '.css_test img:eq(-1)' ) ) // 지정한것 이전까지 전부
.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><br>
<button type="button" onclick="j_test()">내 밑으로 막내 빼고 전부 주목 !!</button>
<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">
</div>
<script type="text/javascript">
function j_test(){
// 보기 편하게 여러줄로 코딩
$( '.css_test img:eq(1)' )
.nextUntil( $( '.css_test img:eq(-1)' ) ) // 지정한것 이전까지 전부
.attr('src', '//superkts.com/img/huk2.gif'); // 표정바꾸기
setTimeout(function(){
$( '.css_test img' ).attr('src', '//superkts.com/img/huk1.gif'); // 표정되돌리기
}, 500);
}
</script>
관련 CSS
jQuery
$( '.css_test img:eq(1)' ).nextAll( $( '.css_test img:eq(-1)' ) )
- 클래스명이 css_test 인 요소의 두번째 이미지 이후부터 마지막 이미지 전까지 모든것 찾기
- 인덱스는 0 부터 시작이므로 두번째 이후 즉 3번째 부터 대상입니다.
참고 메서드 : .eq()
- 클래스명이 css_test 인 요소의 두번째 이미지 이후부터 마지막 이미지 전까지 모든것 찾기
- 인덱스는 0 부터 시작이므로 두번째 이후 즉 3번째 부터 대상입니다.
참고 메서드 : .eq()
예제 2
애니메이션 효과 적용해보기
보기
위 예제를 개와 고양이 점프하기로 바꿔보았습니다.
소스
<style type="text/css">
.css_test {
border : 5px solid gray;
border-radius : 5px;
padding : 5px;
}
.css_test img {
position : relative; /* 애니메이션 효과 적용을 위해 적용 */
}
</style>
위 예제를 개와 고양이 점프하기로 바꿔보았습니다.<br><br>
<button type="button" onclick="j_test()">점프 !!</button>
<div class="css_test">
<img src="//superkts.com/img/css/dog061.gif">
<img src="//superkts.com/img/css/cat051.gif">
<img src="//superkts.com/img/css/dog061.gif">
<img src="//superkts.com/img/css/cat051.gif">
<img src="//superkts.com/img/css/dog061.gif">
<img src="//superkts.com/img/css/cat051.gif">
<img src="//superkts.com/img/css/dog061.gif">
<img src="//superkts.com/img/css/cat051.gif">
</div>
<script type="text/javascript">
function j_test(){
// 보기 편하게 여러줄로 코딩
$( '.css_test img:eq(1)' )
.nextUntil( $( '.css_test img:eq(-1)' ) ) // 지정한것 이전까지 전부
.animate({top:-50}, 200, function(){ // 점프효과
$(this).animate({top:0}, 300);
})
}
</script>
.css_test {
border : 5px solid gray;
border-radius : 5px;
padding : 5px;
}
.css_test img {
position : relative; /* 애니메이션 효과 적용을 위해 적용 */
}
</style>
위 예제를 개와 고양이 점프하기로 바꿔보았습니다.<br><br>
<button type="button" onclick="j_test()">점프 !!</button>
<div class="css_test">
<img src="//superkts.com/img/css/dog061.gif">
<img src="//superkts.com/img/css/cat051.gif">
<img src="//superkts.com/img/css/dog061.gif">
<img src="//superkts.com/img/css/cat051.gif">
<img src="//superkts.com/img/css/dog061.gif">
<img src="//superkts.com/img/css/cat051.gif">
<img src="//superkts.com/img/css/dog061.gif">
<img src="//superkts.com/img/css/cat051.gif">
</div>
<script type="text/javascript">
function j_test(){
// 보기 편하게 여러줄로 코딩
$( '.css_test img:eq(1)' )
.nextUntil( $( '.css_test img:eq(-1)' ) ) // 지정한것 이전까지 전부
.animate({top:-50}, 200, function(){ // 점프효과
$(this).animate({top:0}, 300);
})
}
</script>
관련 CSS
예제 3
얼굴 놀래키기
보기
얼굴을 눌러보세요 ! 그 다음 모든 얼굴이 '깜놀' 합니다..
소스
<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).nextAll().attr( 'src', '//superkts.com/img/huk2.gif' ); // 클릭한 것의 다음것 변경
setTimeout(function(){ // 0.5초 후 다시 원복
$(o).nextAll().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).nextAll().attr( 'src', '//superkts.com/img/huk2.gif' ); // 클릭한 것의 다음것 변경
setTimeout(function(){ // 0.5초 후 다시 원복
$(o).nextAll().attr( 'src', '//superkts.com/img/huk1.gif' );
}, 500);
}
</script>
관련 CSS
예제 4
jQuery 홈페이지 .nextUntil() API 문서 : http://api.jquery.com/nextUntil/