jQuery 탐색(순회)메소드 - 동위

Jude·2022년 11월 13일
0

jQuery

목록 보기
4/4
	/*예제 스타일 설정*/
	<style>
        .wrap,.wrap * {
            border: 1px solid lightskyblue;
            display : block;
            margin : 15px;
            padding : 5px;
            color: lightblue;    
        }
    </style>

동위 메소드

같은 레벨에 있는 요소들을 선택할 수 있는 메소드

  • $("선택자").siblings()
    선택된 요소와 같은 레벨에 있는 모든 요소들 선택
  • $("선택자").siblings("선택자")
    선택된 요소와 같은 레벨에 있는 요소들 중에서
    제시한 값과 일치하는 요소들만 선택
  • $("선택자").next()
    선택요소와 같은 레벨에 있는 요소들 중에서
    바로 다음 요소 하나만 선택
  • $("선택자").nextAll()
    선택된 요소와 같은 레벨에 있는 요소들 중에서
    바로 다음 요소들 다 선택
  • $("선택자").nextUntil()
    선택된 요소와 같은 레벨에 있는 요소들 중에서 제시한 값과 일치하는 요소들 까지만 선택
  • $("선택자").prev()
    선택된 요소와 같은 레벨에 있는 요소들 중에서
    바로 전 요소 하나만 선택
  • $("선택자").prevAll()
    선택된 요소와 같은 레벨에 있는 요소들 중에서
    바로 이전 요소들 다 선택
  • $("선택자").prevUntil()
    선택된 요소와 같은 레벨에 있는 이전 요소들 중에서 제시한 값과 일치하는 요소들 까지만 선택
	<script>
        $(function(){
            var style1 = {color:"red",border:"3px solid red"}
            var style2 = {color:"orange",border:"3px solid orange"}
            var style3 = {color:"hotpink",border:"3px solid yellow"}
            var style4 = {color:"green",border:"3px solid green"}
            var style5 = {color:"blue",border:"3px solid blue"}
            var style6 = {color:"pink",border:"3px solid pink"}
            //siblings() : h2요소를 기준으로 같은 레벨에 있는 요소 선택 (본인 제외)
            $("h2").siblings().css(style1);
            h2요소를 기준으로 같은 레벨에 있는 요소들 중 p태그요소만 선택
            $("h2").siblings("p").css(style2);
            next() : 해당 요소를 기준으로 바로 다음 요소 하나만 선택
            $("h2").next().css(style3);
            nestAll() : 해당 요소를 기준으로 바로 다음요소들 전부 선택
            $("h2").nextAll().css(style4);           
            nextUntil() : 해당 요소를 기준으로 바로 다음 요소들 중 선택요소 전까지 선택
            $("span").nextUntil("p").css(style2);
            prev() : 해당요소를 기준으로 바로 이전 요소를 하나만 선택
            $("h5").prev().css(style5);
            prevAll() : 해당 요소를 기준으로 바로 이전요소들 전부 선택
            $("h6").prevAll().css(style6);
            prevUntil() : 해당 요소를 기준으로 바로 이전요소들 중 선택요소 전까지 선택
            $("h5").prevUntil("h2").css(style5);
        });
    </script>
profile
늦었으니 더 빠르게!

0개의 댓글