Jqueryで隣のtd内にあるselectの値を取得したい。

Question

table内にて、td内のセレクトボックスが操作されると、隣のtd内のセレクトボックスの値を取得する機能を作りたいのですが、取得した値は「undefined」でした。
取得する場所の指定がうまくいっていないと思うのですが…。
ご教授お願い致します。

該当のソースコード

<table>
<tr>
<td>
  <div>
  <select class='c1'>
    <option value="0"></option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
  </select>
  </div>
</td>
<td>
  <div>
  <select class='c2'>
    <option value="0"></option>
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
  </select>
  </div>
</td>
</tr>
</table>

$(function() {
  $('.c1').change(function () {
    var valA = $(this).val();
    var valB = $(this).parents('td').next().children('.c2').val();
    console.log(valB);
  });
});

試したこと

valB
実行：$(this).parent().parent().next().child().child().val();
結果：$(...).parent(...).parent(...).next(...).child is not a function(エラー)

実行：$(this).closest().val();
結果：undefined

実行：$(this).parents('td').next().css('background-color', 'red');
結果：隣のtdのセルが赤くなった(nextまでは合っている)

Answer 1

これでどうでしょう。

// $(this).parents('td').next().children('.c2').val();
//                                ↓
   $(this).parents('td').next().find('.c2').val();

Comments

[Suguru_KP]

無事解決することができました！
なるほど、findを使うのは盲点でした…。
迅速な回答、ありがとうございます！