eq() 선택자 => $('#선택자').eq(0)의 정의 및 예제

# eq()

("선택자").eq(숫자);

<div class="contents" id="content1">
   <table>
      <colgroup>
         <col width="10%">
         <col width="15%">
         <col>
      </colgroup>
      <tbody>
         <tr>
            <th colspan="2">택 ID</th>
            <td>
               <div class="select_box" style="width:100%;">
                  <select style="width:98.7%;">
                     <option value="" selected>택 선택</option>
                  </select>
               </div>
            </td>
         </tr>
         <tr>
            <th colspan="2">일시</th>
            <td>
               <div class="select_box" style="width:100%;">
                  <select style="width:98.7%;">
                     <option value="" selected>일시 선택</option>
                  </select>
               </div>
            </td>
         </tr>
         <tr>
            <th colspan="2">작업 여부</th>
            <td></td>
         </tr>
         <tr>
            <th colspan="2">착용 여부</th>
            <td></td>
         </tr>
         <tr>
            <th colspan="2">행동 여부</th>
            <td></td>
         </tr>
         <tr>
            <th colspan="2">도시</th>
            <td>
               <div class="select_box" style="width:100%;">
                  <select style="width:98.7%;">
                     <option value="" selected>도시 선택</option>
                  </select>
               </div>
            </td>
         </tr>
      </tbody>
   </table>
</div>

 

# html로 보이면 아래처럼 보인다.

 

 

 

# 아래 같은 소스가 있다고 하자.

$(`#content1 td`).eq(0).html("하이");

 

 

 

# 아래와 같은 결과가 나온다

 

# 만약에 이러면 어떨까?

$(`#content1 td`).eq(0).html("하이");

위 처럼 나오게 된다.

 

 

 

# select eq(2) 응용해서 이렇게 결과를 보면 어떻게 나올까?

let _html = `<option value="">2024/02/23</option>`;
$(`#content1 select`).eq(2).html(_html);

 

 

보면 2번째 일시 부분에 _html이 들어간다고 생각하지만 실상은 그렇지 않다.

 

 

# select eq(1)

let _html = `<option value="">2024/02/23</option>`;
$(`#content1 select`).eq(1).html(_html);

 

 

# 결론

즉 eq는 td가 5개 있으면 순서대로 0,1,2,3,4 번째의 자리에 있는 td를 찾아준다.

마찬가지로 선택자로 select를 정했으면 해당 자리의 첫번째, 두번째, 세번째 자리의 있는 select를 찾는다.