jQuery 공작소 : .parentsUntil()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
parentsUntil 메서드는 지정한 대상의 부모 요소들을 찾습니다.
그리고 찾을 부모를 한정할 수 있습니다.
참고로 parents 메서드는 부모 요소들을 모두 찾습니다.
예제 1
기본 예제
보기
클릭한 번호에 해당하는것의 부모를 모두 찾습니다.
부모는 회색 네모칸이며 클릭시 색이 변합니다.
부모는 회색 네모칸이며 클릭시 색이 변합니다.
1
2
1-1
1-2
1-3
2-1
2-2
2-3
2-4-1
2-4-2
2-4-3
소스
<style type="text/css">
.css_test div {
border-radius : 5px;
border : 7px solid gray;
box-shadow : 0 0 5px silver;
margin : 7px 2px;
padding : 5px;
}
.css_test span {
border-radius : 5px;
border : 2px solid silver;
cursor : pointer;
display : inline-block;
font-size : 25pt !important;
font-weight : bold;
padding : 5px;
}
</style>
클릭한 번호에 해당하는것의 부모를 모두 찾습니다.<br>
부모는 회색 네모칸이며 클릭시 색이 변합니다.<br><br>
<div class="css_test">
<div>
<span name="1">1</span>
<span name="2">2</span>
<div>
<span name="1-1">1-1</span>
<span name="1-2">1-2</span>
<span name="1-3">1-3</span>
</div>
<div>
<span name="2-1">2-1</span>
<span name="2-2">2-2</span>
<span name="2-3">2-3</span>
<div>
<span name="2-4-1">2-4-1</span>
<span name="2-4-2">2-4-2</span>
<span name="2-4-3">2-4-3</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// span 태그에 클릭이벤트 생성하기
$('.css_test span').bind( 'click', function(){
j_test( $(this).attr( 'name' ) ); // 클릭시 name 의 값을 j_test 함수로 전달하여 실행
});
function j_test(v){
// 보기 편하게 여러줄로 코딩
$('.css_test [name=' + v + ']')
.animate( { 'color' : '#fff' }, function(){
// 글자색 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'color' : 'black' } );
} )
.parentsUntil()
.animate( { 'border-color' : 'red' }, function(){
// 테두리 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'border-color' : 'gray' } );
} );
}
</script>
.css_test div {
border-radius : 5px;
border : 7px solid gray;
box-shadow : 0 0 5px silver;
margin : 7px 2px;
padding : 5px;
}
.css_test span {
border-radius : 5px;
border : 2px solid silver;
cursor : pointer;
display : inline-block;
font-size : 25pt !important;
font-weight : bold;
padding : 5px;
}
</style>
클릭한 번호에 해당하는것의 부모를 모두 찾습니다.<br>
부모는 회색 네모칸이며 클릭시 색이 변합니다.<br><br>
<div class="css_test">
<div>
<span name="1">1</span>
<span name="2">2</span>
<div>
<span name="1-1">1-1</span>
<span name="1-2">1-2</span>
<span name="1-3">1-3</span>
</div>
<div>
<span name="2-1">2-1</span>
<span name="2-2">2-2</span>
<span name="2-3">2-3</span>
<div>
<span name="2-4-1">2-4-1</span>
<span name="2-4-2">2-4-2</span>
<span name="2-4-3">2-4-3</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// span 태그에 클릭이벤트 생성하기
$('.css_test span').bind( 'click', function(){
j_test( $(this).attr( 'name' ) ); // 클릭시 name 의 값을 j_test 함수로 전달하여 실행
});
function j_test(v){
// 보기 편하게 여러줄로 코딩
$('.css_test [name=' + v + ']')
.animate( { 'color' : '#fff' }, function(){
// 글자색 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'color' : 'black' } );
} )
.parentsUntil()
.animate( { 'border-color' : 'red' }, function(){
// 테두리 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'border-color' : 'gray' } );
} );
}
</script>
관련 CSS
jQuery
$( 셀렉터 ).parentsUntil() - 셀렉터에 해당하는 요소에서 모든 부모 요소 찾기
- 예제처럼 아무 옵션도 사용하지 않은 상태에서는 parents 메서드와 동일한 결과가 나옵니다.
- animate 메스드로 테두리색 변화 효과를 사용하려면 jQueryUI 도 사용해야 합니다.
- 참고 예제 : 제이쿼리UI 사용하기
예제 2
지정한 대상 안에서 찾기
보기
파란색 네모칸의 2번대 번호들은 그 안에서만 부모를 찾습니다.
2-X-X 번호만 반응할 것입니다.
하지만 파란색네모 밖의 번호는 상관없이 부모를 찾습니다.
2-X-X 번호만 반응할 것입니다.
하지만 파란색네모 밖의 번호는 상관없이 부모를 찾습니다.
1
2
1-1
1-2
1-3
2-1
2-2
2-3
2-4-1
2-4-2
2-4-3
소스
<style type="text/css">
.css_test div {
border-radius : 5px;
border : 7px solid gray;
box-shadow : 0 0 5px silver;
margin : 7px 2px;
padding : 5px;
}
.css_test div.limit {
border-color : blue;
}
.css_test span {
border-radius : 5px;
border : 2px solid silver;
cursor : pointer;
display : inline-block;
font-size : 25pt !important;
font-weight : bold;
padding : 5px;
}
</style>
파란색 네모칸의 2번대 번호들은 그 안에서만 부모를 찾습니다.<br>
2-X-X 번호만 반응할 것입니다.<br>
하지만 파란색네모 밖의 번호는 상관없이 부모를 찾습니다.<br>
<div class="css_test">
<div>
<span name="1">1</span>
<span name="2">2</span>
<div>
<span name="1-1">1-1</span>
<span name="1-2">1-2</span>
<span name="1-3">1-3</span>
</div>
<div class="limit">
<span name="2-1">2-1</span>
<span name="2-2">2-2</span>
<span name="2-3">2-3</span>
<div>
<span name="2-4-1">2-4-1</span>
<span name="2-4-2">2-4-2</span>
<span name="2-4-3">2-4-3</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// span 태그에 클릭이벤트 생성하기
$('.css_test span').bind( 'click', function(){
j_test( $(this).attr( 'name' ) ); // 클릭시 name 의 값을 j_test 함수로 전달하여 실행
});
function j_test(v){
// 보기 편하게 여러줄로 코딩
$('.css_test [name=' + v + ']')
.animate( { 'color' : '#fff' }, function(){
// 글자색 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'color' : 'black' } );
} )
.parentsUntil( '.css_test .limit' ) // 부모 제한하기
.animate( { 'border-color' : 'red' }, function(){
// 테두리 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'border-color' : 'gray' } );
} );
}
</script>
.css_test div {
border-radius : 5px;
border : 7px solid gray;
box-shadow : 0 0 5px silver;
margin : 7px 2px;
padding : 5px;
}
.css_test div.limit {
border-color : blue;
}
.css_test span {
border-radius : 5px;
border : 2px solid silver;
cursor : pointer;
display : inline-block;
font-size : 25pt !important;
font-weight : bold;
padding : 5px;
}
</style>
파란색 네모칸의 2번대 번호들은 그 안에서만 부모를 찾습니다.<br>
2-X-X 번호만 반응할 것입니다.<br>
하지만 파란색네모 밖의 번호는 상관없이 부모를 찾습니다.<br>
<div class="css_test">
<div>
<span name="1">1</span>
<span name="2">2</span>
<div>
<span name="1-1">1-1</span>
<span name="1-2">1-2</span>
<span name="1-3">1-3</span>
</div>
<div class="limit">
<span name="2-1">2-1</span>
<span name="2-2">2-2</span>
<span name="2-3">2-3</span>
<div>
<span name="2-4-1">2-4-1</span>
<span name="2-4-2">2-4-2</span>
<span name="2-4-3">2-4-3</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// span 태그에 클릭이벤트 생성하기
$('.css_test span').bind( 'click', function(){
j_test( $(this).attr( 'name' ) ); // 클릭시 name 의 값을 j_test 함수로 전달하여 실행
});
function j_test(v){
// 보기 편하게 여러줄로 코딩
$('.css_test [name=' + v + ']')
.animate( { 'color' : '#fff' }, function(){
// 글자색 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'color' : 'black' } );
} )
.parentsUntil( '.css_test .limit' ) // 부모 제한하기
.animate( { 'border-color' : 'red' }, function(){
// 테두리 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'border-color' : 'gray' } );
} );
}
</script>
관련 CSS
jQuery
$( 셀렉터 ).parentsUntil( 셀렉터 )
- 셀렉터에 해당하는 요소에서 모든 부모 요소 찾습니다만 범위를 셀렉터 로 제한합니다.
- 제한 되기 때문에 상위의 모든 부모를 찾지는 않습니다.
- 만약 제한조건에 해당하는 셀렉터가 없다면 모든 것을 대상으로 합니다.
- 1-X 번호들은 제한 사항에 해당하는 부모 요소가 없으므로 모든 부모를 대상으로 합니다.
- 2-X, 2-X-X 의 경우 파란색 네모 상위의 부모는 대상으로 하지 않습니다.
- 그리고 제한조건에 해당하는 요소는 포함하지 않습니다. 그래서 2-X 번호의 경우 반응이 없죠.
예제 3
찾을 대상을 필터링 하기
보기
이번에는 부모를 필터링하여 찾는 예제입니다.
모든 조건은 위 예제와 같지만 찾는 대상은 제일 바깥쪽의 네모칸 입니다.
제일 바깥쪽의 네모만 찾도록 필터링을 사용한 예제입니다.
모든 조건은 위 예제와 같지만 찾는 대상은 제일 바깥쪽의 네모칸 입니다.
제일 바깥쪽의 네모만 찾도록 필터링을 사용한 예제입니다.
1
2
1-1
1-2
1-3
2-1
2-2
2-3
2-4-1
2-4-2
2-4-3
소스
<style type="text/css">
.css_test div {
border-radius : 5px;
border : 7px solid gray;
box-shadow : 0 0 5px silver;
margin : 7px 2px;
padding : 5px;
}
.css_test div.limit {
border-color : blue;
}
.css_test span {
border-radius : 5px;
border : 2px solid silver;
cursor : pointer;
display : inline-block;
font-size : 25pt !important;
font-weight : bold;
padding : 5px;
}
</style>
이번에는 부모를 필터링하여 찾는 예제입니다.<br>
모든 조건은 위 예제와 같지만 찾는 대상은 제일 바깥쪽의 네모칸 입니다.<br>
제일 바깥쪽의 네모만 찾도록 필터링을 사용한 예제입니다.<br><br>
<div class="css_test">
<div class="only">
<span name="1">1</span>
<span name="2">2</span>
<div>
<span name="1-1">1-1</span>
<span name="1-2">1-2</span>
<span name="1-3">1-3</span>
</div>
<div class="limit">
<span name="2-1">2-1</span>
<span name="2-2">2-2</span>
<span name="2-3">2-3</span>
<div>
<span name="2-4-1">2-4-1</span>
<span name="2-4-2">2-4-2</span>
<span name="2-4-3">2-4-3</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// span 태그에 클릭이벤트 생성하기
$('.css_test span').bind( 'click', function(){
j_test( $(this).attr( 'name' ) ); // 클릭시 name 의 값을 j_test 함수로 전달하여 실행
});
function j_test(v){
// 보기 편하게 여러줄로 코딩
$('.css_test [name=' + v + ']')
.animate( { 'color' : '#fff' }, function(){
// 글자색 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'color' : 'black' } );
} )
.parentsUntil( '.css_test .limit', '.only' ) // 부모 제한하기
.animate( { 'border-color' : 'red' }, function(){
// 테두리 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'border-color' : 'gray' } );
} );
}
</script>
.css_test div {
border-radius : 5px;
border : 7px solid gray;
box-shadow : 0 0 5px silver;
margin : 7px 2px;
padding : 5px;
}
.css_test div.limit {
border-color : blue;
}
.css_test span {
border-radius : 5px;
border : 2px solid silver;
cursor : pointer;
display : inline-block;
font-size : 25pt !important;
font-weight : bold;
padding : 5px;
}
</style>
이번에는 부모를 필터링하여 찾는 예제입니다.<br>
모든 조건은 위 예제와 같지만 찾는 대상은 제일 바깥쪽의 네모칸 입니다.<br>
제일 바깥쪽의 네모만 찾도록 필터링을 사용한 예제입니다.<br><br>
<div class="css_test">
<div class="only">
<span name="1">1</span>
<span name="2">2</span>
<div>
<span name="1-1">1-1</span>
<span name="1-2">1-2</span>
<span name="1-3">1-3</span>
</div>
<div class="limit">
<span name="2-1">2-1</span>
<span name="2-2">2-2</span>
<span name="2-3">2-3</span>
<div>
<span name="2-4-1">2-4-1</span>
<span name="2-4-2">2-4-2</span>
<span name="2-4-3">2-4-3</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// span 태그에 클릭이벤트 생성하기
$('.css_test span').bind( 'click', function(){
j_test( $(this).attr( 'name' ) ); // 클릭시 name 의 값을 j_test 함수로 전달하여 실행
});
function j_test(v){
// 보기 편하게 여러줄로 코딩
$('.css_test [name=' + v + ']')
.animate( { 'color' : '#fff' }, function(){
// 글자색 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'color' : 'black' } );
} )
.parentsUntil( '.css_test .limit', '.only' ) // 부모 제한하기
.animate( { 'border-color' : 'red' }, function(){
// 테두리 색상 변화를 애니메이션 효과로 주기
$(this).animate( { 'border-color' : 'gray' } );
} );
}
</script>
관련 CSS
jQuery
$( 셀렉터 ).parentsUntil( 대상제한 셀렉터t, 대상 필터링 셀렉터 )
$( 셀렉터 ).parentsUntil( '.css_test .limit', '.only' )
- 셀렉터에 해당하는 요소에서 모든 부모 요소 찾습니다만 범위를 셀렉터 로 제한합니다.
- 그리고 찾는 부모는 only 라는 클래스명을 포함하고 있어야합니다.
- 이 조건에 해당되는 것은 1-X 번호들 입니다.
예제 4
jQuery
예제를 만들기도 좀 어려웠습니다. ^^;
이 메서드를 어디에 써야할지는 솔직히 잘 모르겠네요.
이런 메서드 까지 써야한다면 평범한것을 만드는것은 아니겠죠.
- 화이팅 입니다 !! - ㅎ
이 메서드를 어디에 써야할지는 솔직히 잘 모르겠네요.
이런 메서드 까지 써야한다면 평범한것을 만드는것은 아니겠죠.
- 화이팅 입니다 !! - ㅎ
+ 관련 jQuery +
jQuery 홈페이지 .parentsUntil() API 문서 : http://api.jquery.com/parentsUntil/