jQuery 공작소 : .addBack()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
addBack 메서드는 현재 셀렉터 기준으로 이전의 요소를 추가합니다.
설명이 좀 어렵네요. 예제로 확인해 봅시다 ^^
예제 1
먼저 비교해 보기 위한 일반 예제입니다. addBack 메서드 사용안함
보기
$( 'img:eq(1)' ).nextAll() - 두번째 닭 이후로 전부 반응합니다.
예제 2
addBack 메서드를 사용한 예제
보기
$( 'img:eq(1)' ).nextAll().addBack() - 두번째 닭을 포함하여 이후로 전부 반응합니다.
소스
<style type="text/css">
.css_test {
text-align : center;
border-bottom : 5px solid #752600;
}
.css_test img {
position : relative;
z-index : 10;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/bird17.gif" />
</div>
<button type="button" onclick="j_test($('.css_test img:eq(1)').nextAll().addBack())">날아랏!</button><br>
$( 'img:eq(1)' ).nextAll().<b>addBack</b>() - 두번째 닭을 포함하여 이후로 전부 반응합니다.
<script type="text/javascript">
// 제이쿼리를 매개변수로 받아서 간단한 애니메이션 처리
function j_test(j){
j.finish().animate({top:'-=100'}, 1000, function(){
$(this).animate({top:'+=100'}, 500);
});
}
</script>
.css_test {
text-align : center;
border-bottom : 5px solid #752600;
}
.css_test img {
position : relative;
z-index : 10;
}
</style>
<div class="css_test">
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/bird17.gif" />
<img src="//superkts.com/img/css/bird17.gif" />
</div>
<button type="button" onclick="j_test($('.css_test img:eq(1)').nextAll().addBack())">날아랏!</button><br>
$( 'img:eq(1)' ).nextAll().<b>addBack</b>() - 두번째 닭을 포함하여 이후로 전부 반응합니다.
<script type="text/javascript">
// 제이쿼리를 매개변수로 받아서 간단한 애니메이션 처리
function j_test(j){
j.finish().animate({top:'-=100'}, 1000, function(){
$(this).animate({top:'+=100'}, 500);
});
}
</script>
관련 CSS
jQuery
$( 'img:eq(1)' ).nextAll().addBack()
- 두번째 이미지 이후부터 전부를 그리고 두번째 이미지 이전것도 추가로 포함한것을 대상으로 함
- 두번째를 포함하여 그 이후 전부를 대상으로 합니다.
- nextAll 은 현재것을 포함하지 않는데 addBack 을 사용하여 현재것도 포함 하도록 했습니다.
예제 3
예제 조금 더 ! - 같은 것들 비교
보기
jQuery
- 첫 번째 닭 이후로 반응합니다.
jQuery 홈페이지 .addBack() API 문서 : http://api.jquery.com/addBack/