[JavaScript/jQuery] 상위 및 하위 요소 접근하기 closest/find()

 

상황) 선택된 라디오 버튼의 강의명과 강의시간의 값이 필요하다.

> 상위(부모) 요소에 접근하여 얻고자 하는 요소의 값을 얻을 수가 있다.

 

1. 체크된 라디오 버튼 변수 선언

const radBtn = $(":input:radio[name=sltUser]:checked");

2. 체크된 라디오 버튼의 상위 li를 가져오기

const li = radBtn.closest('li')					// 체크된 라디오버튼의 상위 li

3. find 메소드를 활용하여 td 값 가져오기

li.find('td:eq(0)').text();	// 강의명
li.find('td:eq(1)').text();	// 강의시간

 

* 전달받은 퍼블리싱이 아래와 같이 되어 있어서 이와 같이 접근하였으며, 상위 및 하위 요소를 찾는 것은 자주 쓰이므로 예제1이라 생각하기

 

- index.html

<li>
    <section>
      <header>
        <div>
          <label>
            <input type="radio" name="radBtn">
            <span>선택</span>
          </label>
        </div>
      </header>

      <table>
        <caption>상세</caption>
        <colgroup>
          <col style="width: 100px;">
          <col>
        </colgroup>
        <tbody>
          <tr>
            <th scope="row">강의명</th>
            <td>휘낭시에 만들기</td>
          </tr>
          <tr>
            <th scope="row">강의시간</th>
            <td>18:00 ~ 19:00</td>
          </tr>
        </tbody>
      </table>
    </section>
</li>