최현일
195
2021-07-22 15:17:50 작성 2021-07-22 15:56:33 수정됨
1
421

JQuery, Traversing. 제이쿼리... 위치찾기. eq, parent.


JQuery에 대해 적어보네요.


프론트엔드. 웹페이지에서, 버튼을 클릭하면, 숫자가 1 올라가던지요.


이런 경우가 있죠? 그럼, 1을 찾아야하는데... 그때 사용하는 것이 제이쿼리에서, parent, children, eq. 입니다.


버튼의 경우 번갈아가면서, display none과 block을 줌니다. 예약버튼. 또는 취소버튼. 예약이 되었을 경우에는 취소버튼이 보여야 되고, 예약이 안되었을 경우에는 예약버튼이 보여야 겠죠.  

 

 기본적으로 예약버튼이 먼저 보이겠죠. 취소버튼이 보이려면, 사용자의 예약, 취소정보가 들어와야 알테니까요.


 처음에, JQuery를 통해서, 예약될 기본정보. 예를 들면, 어느 날짜에 예약정보를 쭉보여줌니다. 이때에, 누군가 예약을 했다면, 그만큼 숫자가 올라간 상태로 나오겠죠~.


그렇게, 예약, 취소. 이 버튼이 바뀌는 경우.

 

 이렇게 2번 불러오게 됨니다. 이때에 버튼은 

 <td><button class="btn btn-success btn-sm resv">예약</button></td>
 <td><button class="btn btn-danger btn-sm cancel">취소</button></td>


위에 처럼 2가지를 다 가지고 있어요. 그런데... 

$.(document).ready(function(){})

제이쿼리를 처음에 시작하는 곳에서, 


$(this).parent().children("td").eq(5).css("display","none");
$(this).parent().children("td").eq(6).css("display","block");

위처럼, 예약버튼은 보이게 하고, 취소버튼은 보이지 않게 만들죠. this가 아니라, .timeSheetId입니다. each문 안에 들어있기 때문에, this가 되었어요.


이때에 JQuery의 Traversing을 공부해봅시다.


<tr>
   <td class="timeSheetId" style="display:none">{{timesheet.12.timeSheetId}}</td>
   <td>{{timesheet.12.stime}}</td>
   <td>{{timesheet.12.etime}}</td>
   <td>아침 작업</td>
   <td colspan="2">{{timesheet.12.man}} / {{timesheet.12.max0}}</td>

   <td><button class="btn btn-success btn-sm resv">예약</button></td>
   <td><button class="btn btn-danger btn-sm cancel">취소</button></td>
</tr>


위의 코드가, 테이블 tr. 한줄 블럭입니다.


 $(".timeSheetId").each(function(){})

.timeSheetId 클래스라는 뜻이죠. .점을 사용하면 그렇죠. 클래스라는 말은, 위와 같은 tr이 여러개 이겠죠? 그 tr마다 깊이를 하나하나 들어가게 되요.



 $(this).parent().children("td").eq(5).css("display","none");


위에서 보는 this는 바로, .timeSheetId입니다. 그 tr에서, 버튼을 가기위한 표시이죠. 처음에는 parent. 그럼 어디이겠나요? td의 위. <tr>태그로 올라가요.timeSheetId 클래스가, td태그에 있습니다.

그런다음, children("td"). 그럼 어디일까요? 아직 정확하지가 않죠. 그런데 그 다음.. eq. 이것을 통해서 버튼을 찾아내고 있습니다.

<tr>
   <td class="timeSheetId" style="display:none">{{timesheet.12.timeSheetId}}</td>
   <td>{{timesheet.12.stime}}</td>
   <td>{{timesheet.12.etime}}</td>
   <td>아침 작업</td>
   <td colspan="2">{{timesheet.12.man}} / {{timesheet.12.max0}}</td>
   <td><button class="btn btn-success btn-sm resv">예약</button></td>
   <td><button class="btn btn-danger btn-sm cancel">취소</button></td>
</tr>


eq는 0부터 시작합니다. td에서 0, 1,2,3,4,5. 또, 6번째를 선택할 수 있었습니다. 그래서 버튼의 모양을 바꿀 수 있게 된 것이죠~.


공부해보세요~.


저의 글, 봐 주셔서 감사합니다.




0
  • 댓글 1

  • nathak
    634
    2021-07-22 17:01:24
    $(".timeSheetId").each(function(){})

    클래스보단 id 기반으로 찾는것이 성능상 좋을꺼 같네요

  • 로그인을 하시면 댓글을 등록할 수 있습니다.