Как выбрать первый тд по сравнению с нажатым тд

Question

Было бы очень легко, если бы селектор был просто <tr>, как этот $('tr'), но я нацелен на td.Например, нажмите здесь или td 2 и т. Д. Я хочу, чтобы содержимое первого td сравнивалось с нажатием td.То есть td 1 в этом случае.

//And this is my jQuery code with <tr> .. what about if a select was a <td> ? 
$('tr').on('click', function() {
  var tds = $('td:first-child', this).text();
  alert(tds);
});

//After having documented I found this but that did not help :( 
var td1 = $(this).closest('td.id').prev('').text();
alert(td1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="id"> td 1 </td>
    <td> td 2 </td>
    <td> td 3 </td>
    <td> CLICK HERE </td>
  </tr>
</table>

Заранее спасибо

Answer 1

Вы можете использовать функции jQuerys parent() и children():

$('td').on('click',function()
  {
     var tr = $(this).parent();
     var tds = tr.children();
     var first_td = tds[0];
     var text = $(first_td).text();
     alert(text);
  });

Answer 2

Чтобы получить первый td любой строки, по которой щелкнули, используйте селектор :first, например:

$('tr').on('click', function() {
  var tds = $(this).find('td:first').text();
});

В качестве альтернативы, если событие click связано с самим td,используйте closest(), чтобы получить родителя tr, затем найдите первое td:

$('td').on('click', function() {
  var tds = $(this).closest('tr').find('td:first').text();
});