[jQuery(제이쿼리)] 형제 요소의 탐색 .siblings() .next() .prev()

jQuery(제이쿼리) 형제 요소의 탐색

• DOM 트리에서 특정 요소의 형제(sibling) 요소 즉, 같은 선상에 있는 요소를 선택하기 위한 메소드는 다음과 같다.

 <table style="font-size: 13px; text-align: left; padding: 4px;">
      <tbody>
        <tr>
          <th>.siblings()</th>
          <td>선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.</td>
        </tr>
        <tr>
          <th>.next()</th>
          <td>선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.</td>
        </tr>
        <tr>
          <th>.nextAll()</th>
          <td>선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다.</td>
        </tr>
        <tr>
          <th>.nextUntil()</th>
          <td>선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.</td>
        </tr>
        <tr>
          <th>.prev()</th>
          <td>선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다.</td>
        </tr>
        <tr>
          <th>.prevAll()</th>
          <td>선택한 요소의 이전에 위치한 형제 요소를 모두 선택한다.</td>
        </tr>
        <tr>
          <th>.prevUntil()</th>
          <td>선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 다음까지의 요소를 모두 선택한다.</td>
        </tr>
      </tbody>
    </table>

예제 html

<ul>ul (부모)
  <li>li (형제)</li>
  <li>li (형제)</li>
  <li class="me">li (나)</li>
  <li>li (형제)</li>
  <li>li (형제)</li>
</ul>

.siblings() 메소드

• .siblings() 메소드는 선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다.

$(".me").siblings().css({"border": "2px solid red"});

.next() 메소드

• .next() 메소드는 선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다.
• me 클래스를 가진 요소의 바로 다음 형제 요소 하나를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").next().css({"border": "2px solid red"});

.nextAll() 메소드

• .nextAll() 메소드는 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다.
• 이때, 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 형제 요소만 선택할 수도 있다.
• me 클래스를 가진 요소의 다음에 있는 형제 요소를 모두 선택, 해당 요소의 CSS 스타일을 변경한다.

$(".me").nextAll().css({"border": "2px solid red"});

.nextUntil() 메소드

• .nextUntil() 메소드는 선택한 요소의 형제 요소 중에서 전달받은 선택자에 해당하는 요소 바로 이전까지의 요소만을 모두 선택한다.
• 이때, 선택자를 인수로 전달하지 않으면, .nextAll() 메소드와 동일하게 선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다.
  ~
• me 클래스를 가진 요소의 이후 형제 요소 중에서
• 요소의 마지막 바로 이전까지의 모든 요소를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").nextUntil("li:last").css({"border": "2px solid red"});

.prev() 메소드

• .prev() 메소드는 .next(), 메소드와 정반대로 요소들을 선택해 준다.
• me 클래스를 가진 요소의 바로 이전 형제 요소 하나를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").prev().css({"border": "2px solid red"});

.prevAll() 메소드

• .prevAll() 메소드는 .nextAll() 메소드와 정반대로 요소들을 선택해 준다.
  me 클래스를 가진 요소의 이전에 있는 형제 요소를 모두 선택, 해당 요소의 CSS 스타일을 변경한다.

$(".me").prevAll().css({"border": "2px solid red"});

.prevUntil() 메소드

• .prevUntil() 메소드는 .nextUntil() 메소드와 정반대로 요소들을 선택해 준다.
  ~
• me 클래스를 가진 요소의 이전 형제 요소 중에서
• 요소의 첫번째 바로 이전까지의 모든 요소를 선택하여, 해당 요소의 CSS 스타일을 변경한다.

$(".me").prevUntil("li:first").css({"border": "2px solid red"});