jQuery 자식 요소 반환 (:not 예제)

 

 

 

제이쿼리 자식요소 반환

parent()와 children()의 이용하면 자식요소와 부모요소의 손쉬운 선택이 가능한데요.

이때 자식요소 내에서 특정한 선택자만 반환하여 제외시키는 것을 알아볼까합니다.

바로 .children(':not(반환요소)') 를 사용해 주시면 되는데요. 바로 예제 보여드리겠습니다.

<style>
.on {color:red;}
</style>


<ul class="test">
    <li class="click">클릭</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>


<script type="text/javascript">
$('.click').click(function() {
	$('.test').children(':not(.click)').addClass('on');
});
</script>

위처럼 작성을 하시면 click을 클릭했을때 test 클래스 자식요소에 on클래스를 추가하는데 click 클래스만 제외시키라는 명령이 됩니다. 이때 .children(':not(.click)') 가 아닌 .children()를 썼다면 클릭까지 모든 텍스트가 빨간색으로 출력되게 됩니다.