jQuery ~ (siblings) 를 사용하여 형제들 중의 특정 하위 요소 선택

아래 id1 이후로 가장 가까운 첫번째 tr 의 두번째 td 를 선택하려면..?

class 인 tr1, tr2, tr3, td1, td2 등은 실제로는 없는 코드이고, 설명을 하기 위해 덧달아 놓은 겁니다.

<table>

  <tr>

    <td>td01</td>

    <td>td02</td>

  </tr>

  ... (다수의 tr td 문 존재)

  <tr class="tr1">

    <td id="id1">td11</td>

    <td>td12</td>

  </tr>

  <tr class="tr2">

    <td class="td1">td21</td>

    <td class="td2">td22</td>

  </tr>

  <tr class="tr3">

    <td>td31</td>

    <td>td32</td>

  </tr>

</table>

<script>

  alert($('#id1').parent().find('~tr').filter(':eq(0)').find('td:eq(1)'));

  $('#id1').parent().find('~ tr').filter(':eq(0)').find('td:eq(1)').each(function(n){

    alert($(this).html());

  });

</script>

간단할듯 한데, 조금 복잡하네요.

id1 을 선택해서 parent 인 tr 로 올라갔다가 siblings 인 tr 들 중에서 첫번째 tr 을 선택하고,

td 들 중 두번째를 선택하면 됩니다만..

일단 id1 을 선택하려면, $('#id1') 하면 됩니다.

id1 을 감싸는 tr 인 tr.tr1 을 선택하려면,  $('#id1').parent() 로 하면 되구요. 여기까진 너무 쉽죠..?

$('#id1 :parent') 라고 하면 어떠냐구요..? 작동 안 합니다. ㅠ. 공백 없이 해야지.. 라고 말하고픈 분이 계시겠지만..

공백없이 $('#id1:parent') 라고 하면 어떠냐구요..? 그냥 $('#id1') 와 같습니다. ~.

tr.tr1 아래에 있는 모든 tr 들을 선택하려면, $('#id1').parent().find('~ tr') 를 합니다.

물론, 공백없이 $('#id1').parent().find('~tr') 로 해도 동일합니다.

이렇게 하면 tr.tr2 와 tr.tr3 모두 선택됩니다.

이제는, 위에서 선택된 tr 들 중에서 첫번째 tr 인 tr.tr2 만 선택해야 하겠죠..?

find 를 쓸까요..? 아니죠, 이미 선택된 넘들 중에서 첫번째 tr 인 tr.tr2 를 선택해야 하니까, filter 를 써야죠.

$('#id1').parent().find('~tr').filter(':eq(0)')

이제 tr.tr2 까지 왔으니까 마지막으로 td.td2 를 선택해야겠네요.

$('#id1').parent().find('~tr').filter(':eq(0)').find('td:eq(1)')

jQuery 가 알아먹는 방식으로 기술하려 보니 조금은 복잡해졌네요.. ~.

그런데, ~ tr:eq(0) 를 하면 어떠냐는 분도 계실텐데.. 그러면 작동하지 않습니다.

.filter(':eq(0) td:eq(1)') 와 같이 사용하면 어떻겠냐는 분이 계실텐데.. filter 는 자신에게만 적용이 됩니다.

그러니까, .parent(), .find('~tr'), .filter(':eq(0)'), .find('td:eq(1)') 등의 요소를 모두 정확히 써야만 해요.

.Fine.