[jquery]제이쿼리 find(), parent()

테이블을 만들어

find()와 parent() 함수를 테스트해 보겠습니다.

다음과 같은 소스가 있습니다.

            
            
            
        

        
        

            

                
구분
                
체크박스
                
라디오박스
            
        

        

            

            
                

                

                

            
            

                

                

                

            
            

                

                

                

            
            

                

                

                

            
        
    

    

화면모습은 아래와 같습니다.

checkBox foreach 버튼을 클릭하면 다음의 함수가 실행 됩니다.

$("#checkForeach").click(function(){

//요소 찾아서 for문돌리기 

$("input:checkbox[id='chname']").each(function(index,element){

alert($(this).val());

});

});

위 함수는 태그가 input 이고 type이 checkbox 그리고 id 가 chname인 객체를 찾아 그 값을 출력하는 함수 입니다.

즉, check01, check02, check03, check04 가 차례로 출력됩니다.

그다음은 체크 박스를 클릭하면

$("input:checkbox[name='chname']").click(function(){

alert($(this).val());

});

함수가 실행됩니다. 위의 설명과 비슷하니 소스를 보시면 이해될 거라 생각됩니다.

그리고 오늘의 핵심인 find()와 parent()를 설명 드리겠습니다.

맨앞의 체크박스를 선택하면 다음과 같은 효과가 나타납니다.

그럼 jquery 함수를 보면서 설명드리겠습니다. 위의 함수의 내용은

$("input:checkbox[name='allBtn']").click(function(){

$(this).parent().parent().find("#rdname").attr('disabled',true);

$(this).parent().parent().find("#chname").attr('disabled',true);

});

입니다.  altBtn이라는 이름의 checkbox를 선택하면 일어난다는 뜻입니다.

다음의 뜻을 해석해보면

$(this).parent() 는 <td></td> 를 의미합니다. 

그리고

$(this).parent().parent() 는 <tr></tr> 를 의미합니다. 

그래서 <tr> </tr>안에 있는 요소들중에 이름이 rdname과 chname인 요소를 찾아서 disabled 시킨다는 뜻입니다.

함수이름이 직설적으로 기능을 설명하고 있어 따로 글로.. 설명 드릴게 없네요.