제이쿼리 jQuery closest(), parant(), siblings(), children()

<div id="grandmom">
    <div id="mom">
        <div id="me">
            <div id="son">
                <div id="grandson"></div>
            </div>
        <div/>
        <input type="text" id="brother"/>
        <a id="sister"/>
    </div>
<div/>

 

1. parent()

        $(document).on("click","#me",function(){ 
            
            $(this).parent().css("background-color","red");
            
        });

결과 : grandmom , mom의 div색이 red로 변경됨.

parent() 함수는 부모들을 호출한다. grandmom만 호출하려면 $(this).parent().parent()로 호출하는 법이 있지만

index로 호출하는 eq() 함수가 있다. $(this).parent().eq(2); 이렇게 하면  2번째 상위의 parent 요소가 선택된다.

 

2. closest()

        $(document).on("click","#me",function(){ 
            
            $(this).closest().css("background-color","red");
            
        });

결과 :  mom의 div색이 red로 변경됨 

closest() 함수는 가장 가까운 부모를 선택한다.

 

3.1 siblings()

        $(document).on("click","#me",function(){ 
            
            $(this).siblings();
            
        });

결과 : brother, sister가 선택 된다.

형제 요소들을 호출한다. 만약 바로 옆에 있는 형제만 선태하고 싶다면 next() 함수를 사용한다,

$(this).next("input") 이렇게 사용하면 brother가 선택된다.

 

3-2. siblings()

        $(document).on("click","#me",function(){ 
            
            $(this).siblings('#sister').after('<button type="button" id="sister_2">시스터2</button>');    
        
        });

결과 : a태그 sister 다음에 버튼 태그가 생긴다.

 

4. children()

결과 : son

직계 자식을 선택한다. son 밑에 grandson이 있지만 이 요소는 선택되지 않는다.

grandson까지 선택하려면 find()를 사용한다. find는 depth에 상관없이 하위 자손들을 모두 선택한다. 

jQuery 선택자 에서 자손과 자식은 다른 의미로 사용 된다.

자손 : depth 하위의 자식들도 포괄하고

자식 : 직계자식만을 의미한다.

 

 

본문내용의 출처  https://brunch.co.kr/@ourlove/78