jQuery 공작소 : .parents()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
parents 메소드는 바로 위 부모 요소를 선택합니다.
바로위의 한개만 선택합니다.
예제 1
기본예제 - 지정한 요소의 모든 부모요소 찾기
보기
jQuery 공작소 parents - 여기를 클릭해 보세요.
$( this ).parents().css('border-color', 'red')
$( this ).parents().css('border-color', 'red')
jQuery 공작소
자신이 속한 모든 부모를 찾습니다.
소스
<style type="text/css">
.css_test, .css_test div {
border-radius : 5px;
border : 5px solid gray;
box-shadow : 0 0 5px silver;
padding : 12px;
}
</style>
<div class="css_test">
<div>
<div>
<div onclick="j_test(this)">
jQuery 공작소 parents - <b>여기를 클릭해 보세요.</b><br>
$( this ).parents().css('border-color', 'red')
</div>
</div>
</div>
</div>
<br>
<div class="css_test">
jQuery 공작소
</div>
<br>자신이 속한 모든 부모를 찾습니다.
<script type="text/javascript">
function j_test(el){
$(el).parents().css('border-color', 'red');
}
</script>
.css_test, .css_test div {
border-radius : 5px;
border : 5px solid gray;
box-shadow : 0 0 5px silver;
padding : 12px;
}
</style>
<div class="css_test">
<div>
<div>
<div onclick="j_test(this)">
jQuery 공작소 parents - <b>여기를 클릭해 보세요.</b><br>
$( this ).parents().css('border-color', 'red')
</div>
</div>
</div>
</div>
<br>
<div class="css_test">
jQuery 공작소
</div>
<br>자신이 속한 모든 부모를 찾습니다.
<script type="text/javascript">
function j_test(el){
$(el).parents().css('border-color', 'red');
}
</script>
관련 CSS
jQuery
$( 셀렉터 ).parents() - 셀렉터에 해당하는 모든 부모요소를 찾습니다.
예제 2
특정 부모요소만 찾기
보기
특정 부모요소만 찾기 (노란색 jQuery 공작소 기준으로 특정 부모만찾기)
jQuery 공작소
jQuery 공작소
소스
<style type="text/css">
.css_test, .css_test div, .css_test p {
border-radius : 5px;
border : 5px solid gray;
box-shadow : 0 0 5px silver;
padding : 10px;
margin : 0;
}
.css_test span {
background : yellow;
padding : 10px;
}
</style>
특정 부모요소만 찾기 (노란색 jQuery 공작소 기준으로 특정 부모만찾기)<br><br>
<button type="button" onclick="$('.css_test span').parents('div').css('border-color', 'red');">눌러보세용</button>
<div class="css_test">
<div>
<div>
<span>jQuery 공작소</span>
</div>
</div>
</div>
<br><br>
<div class="css_test">
<div>
<p>
<span>jQuery 공작소</span>
</p>
</div>
</div>
.css_test, .css_test div, .css_test p {
border-radius : 5px;
border : 5px solid gray;
box-shadow : 0 0 5px silver;
padding : 10px;
margin : 0;
}
.css_test span {
background : yellow;
padding : 10px;
}
</style>
특정 부모요소만 찾기 (노란색 jQuery 공작소 기준으로 특정 부모만찾기)<br><br>
<button type="button" onclick="$('.css_test span').parents('div').css('border-color', 'red');">눌러보세용</button>
<div class="css_test">
<div>
<div>
<span>jQuery 공작소</span>
</div>
</div>
</div>
<br><br>
<div class="css_test">
<div>
<p>
<span>jQuery 공작소</span>
</p>
</div>
</div>
관련 CSS
jQuery
$( 셀렉터 ).parents( 셀렉터 ) - 셀렉터에 해당하는 요소에서 지정한 셀렉터에 맞는 모든 부모 요소 찾기
$( '.css_test span' ).parents( 'div' ) - 클래스명이 css_test 인 요소의 span 의 부모중 div 인 모든 부모 찾기
+ 관련 jQuery +
jQuery 홈페이지 .parents() API 문서 : http://api.jquery.com/parents/