[jQuery] next(), prev(), parent(), childern(), eq(n) / 특정 요소를 기준으로 하여 주변 요소 탐색

seulki·2022년 9월 30일

jquery

[jQuery]

목록 보기

19/30

🗝️ 특정 요소를 기준으로하여 주변 탐색하기

하나의 요소를 기준으로 하여 이전, 다음, 상위, 하위, 하위 n번째 요소를 리턴하는 함수들을 통해 HTML 구조를 탐색할 수 있다.

🎈next() : 현재 요소를 기준으로 다음 요소를 리턴

🎈prev() : 현재 요소를 기준으로 이전 요소를 리턴

🎈parent() : 현재 요소의 상위 요소를 리턴

🎈children() : 현재 요소의 하위 요소를 배열로 리턴

🎈 eq(n) : 현재 요소의 하위 요소중에서 n번째 요소를 선택, n의 값은 0부터 시작

🎈HTML

<body>
    <table border="1">
        <tr>
            <td>1번</td> <td>2번</td> <td>3번</td>
        </tr>
        <tr>
            <td>4번</td> <td>5번</td> <td>6번</td>
        </tr>
        <tr>
            <td>7번</td> <td>8번</td> <td>9번</td>
        </tr>
    </table>

🎈CSS

 <style type="text/css">
        /* 테이블의 모든 칸에 동일한 크기와 정렬 지정 */
        td { width: 100px; height: 100px; text-align: center; }
    </style>

🎈jquery

  <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        //여러개의 css 한번에 적용하기 예시
      $('td').eq(4).parent().css({'color': 'white', 'background-color': 'black'})
      $('td').eq(4).parent().css('color', 'white')
      $('td').eq(4).css('background-color', 'tomato')
      $('td').eq(4).prev().css('background-color', 'purple')
      $('td').eq(4).next().css('background-color', 'orange')
      $('td').eq(4).parent().prev().css('color', 'grey')
      $('td').eq(4).parent().prev().children().eq(2).css('background-color', 'aqua')
      $('td').eq(4).parent().next().css({'color': 'red', 'text-decoration' : 'underline'})
      $('td').eq(4).parent().next().children().eq(1).css('font-weight', 'bold')
    </script>