Получить родительский элемент td, который находится непосредственно под tr с определенным классом

Question

У меня есть сложная структура таблицы на веб-странице, как показано ниже. Там потенциально может быть более глубокое вложение таблиц.

Я пытаюсь найти селектор jQuery, чтобы найти ближайший td к данному элементу ввода, с добавленным ограничением на то, что tr этого td должен иметь класс 'class1'.

Вопрос: Как я могу получить сингл «td», описанный выше в параграфе с помощью jQuery? Я пробовал код, но безуспешно.

Например, если данный входной элемент firstname то td непосредственно окружающий этот элемент не будет, кого я ищу, но тд с комментарием говоря <!--this is the td I am trying to get--> является правильным тд.

Я попробовал следующий селектор, чтобы получить этот td, но его возвращаемые 6 td элементов DOM, когда я ожидал только одного. Вы можете увидеть этот код в действии на этот адрес: demo for this scenario

Code Я пытался, но он не работает

$('#firstName').parents("tr.class1").find("td"); 

Html вложенных таблиц

<table> 
    <tr class='class1'> 
     <td> 
     <!--some content here--> 
     </td> 
     <td><!--this is the td I am trying to get--> 
     <table> 
      <tr> 
       <td> 
        First Name 
       </td> 
       <td> 
        <input type='text' id='firstname'> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Last Name 
       </td> 
       <td> 
        <input type='text' id='lastname'> 
       </td> 
      </tr> 
     </table> 
     </td> 
    </tr> 
</table> 

Answer 1

добиться того, что вам необходимо использовать closest() с прямым дочерним селектором, >, чтобы получить родителя td. Попробуйте это:

var $td = $('#firstname').closest('.class1 > td'); 

Example fiddle