JQuery day9

형제요소 탐색

형제요소 탐색

특정 요소에서 형제 요소에 해당하는 요소를 탐색하는 방법에 대해 알아보자

종류	설명
siblings()	선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택
next()	선택한 요소의 바로 다음에 위치한 형제 요소를 선택
nextAll()	선택한 요소의 다음에 위치한 형제 요소를 모두 선택 전달받은 선택자에 해당하는 형제 요소만을 선택할 수 있음
prev()	선택한 요소의 바로 이전에 위치한 형제 요소를 선택
prevAll()	선택한 요소의 이전에 위치한 형제 요소를 모두 선택 전달받은 선택자에 해당하는 형제 요소만을 선택할 수 있음

<div class="container">
    <div>div 요소
        <ul>ul 요소
            <li>li 요소</li>
            <li>li 요소</li>
            <li id="third">li 요소
                <p>p요소
                    <span>span 요소</span>
                </p>
            </li>
            <li>li 요소</li>
            <li>li 요소</li>
        </ul>
    </div>
</div>
<button id="siblingBtn">li 요소의 형제 요소</button>

html 확인 )

<script>
    $(function(){
    $('#siblingBtn').on('click', function(){
        $('#third').siblings().css({"border":"3px solid blue"}); // 형제 전부 찾지
    });
});
</script>

siblings() 적용 )

<script>
    $(function(){
    $('#siblingBtn').on('click', function(){
		$('#third').next().css({"border":"3px solid blue"}); // 바로 다음 형제
    });
});
</script>

next() 적용 )

<script>
    $(function(){
    $('#siblingBtn').on('click', function(){
        $('#third').nextAll().css({"border":"3px solid blue"}); // 다음 형제 중 모든 형제
    });
});
</script>

nextAll(‘요소’) 적용 )

<script>
    $(function(){
    $('#siblingBtn').on('click', function(){
        $('#third').prev().css({"border":"3px solid blue"}); // 바로 다음 형제
    });
});
</script>

prev(‘요소’) 적용 )

<script>
    $(function(){
    $('#siblingBtn').on('click', function(){
        $('#third').prevAll().css({"border":"3px solid blue"}); // 바로 다음 형제
    });
});
</script>

prevAll(‘요소’) 적용 )