[Javascript/jQuery] .closest()

jQuery의 .closest() 함수는 해당 요소의 부모 엘리먼트 중에서 가장 가까운 엘리먼트 하나를 반환한다.

예제 HTML 코드가 아래와 같이 있다고 가정하자. ( 이해를 쉽게 하기 위해 현실감있게 구성해봤다. )

<article class="dialog-article">
    <div class="dataViewer">
        <div class="box">
            <div class="box-head">
                <h3 class="box-title">DATA Viewer</h3>
            </div>
            <!-- /.box-head -->
            
            <div class="box-body">
                <div class="form-group">
                    <button id="dataView" onClick="dataView(this)">Data View</button>
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.dataViewer -->
</article>

 

Data View라는 버튼을 클릭하면 dataView() 함수를 실행하도록 이벤트를 설정했다.

위 코드에는 나타나있지 않지만, 여기서 하나의 시나리오를 가정하자.

Data View라는 버튼은 어떤 데이터를 보여줄건지 특정 라디오버튼을 선택했을 때만 동작해야 한다. ( 아래 그림 참조 )

 

 

해당 라디오버튼은 <article> 태그의 상위의 태그에 있다고 했을때, 아래처럼 함수를 작성할 수 있다.

function dataView(button) {
    var $radio = $(button).closest("article").parent().find("input[name=optradio]:checked")
    
    // jQuery의 .find() 함수는 해당 요소를 찾았다면 0 이상의 값을 반환한다.
    if ($radio.length > 0) {
        // do somthing...
    }
}