Проблема выбора входов внутри тегов TD

Question

У меня есть HTML, как:

<table id="table1">  
  <tr>  
    <td>TEXT</td>  
    <td><input type="number" value="1"></td>  
    <td><input type="number" value="2"></td>  
    <td><input type="button" class="go" value="go"></td>  
  </tr>  
  <tr>  
    <!-- same structure above -->  
  </tr>  
</table>  

и я пытаюсь нацелить входы (номер типа), с помощью Jquery.

Я пробовал два подхода:

# 1:

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td input:nth-child(2)').val();
});  

и № 2:

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td:nth-child(2) input').val();
  g = $(this).closest('tr').find('td:nth-child(3) input').val();
});  

В первом случае значение "g" не определено ("p" является правильным), а во втором "p" не определено ("g" является правильным).

Может кто-нибудь объяснить мне, почему это происходит, и я не могу получить правильное значение для обеих переменных? Заранее спасибо!

Answer 1

nth-child в основном означает найти nth-child в каждом подходящем критерии соответствия. Так как у вас есть find('td input:nth-child(2)'), что будет означать, что найти второе входное вхождение в каждом td, Так как каждый td только имеет 1 вход, если бы дал вам undefined,

Я бы порекомендовал использовать .eq() селектор, который начинается с нулевого индекса.

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td input').eq(1).val();
});  

Пример: https://jsfiddle.net/DinoMyte/s51sayvc/1/

или же

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td').eq(2).find('input').val();
}); 

Пример: https://jsfiddle.net/DinoMyte/s51sayvc/2/

Answer 2

Ты можешь использовать :eq()селектор вроде следующего.

$('#table1').on('click', '.go', function () {
    var tr = $(this).closest('tr');
    var faixa = tr.find('td:first').text(),
    p = tr.find('td input:eq(0)').val(),
    g = tr.find('td input:eq(1)').val();

    console.log(faixa, p, g);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
    <tr>
        <td>TEXT</td>
        <td><input type="number" value="1"></td>
        <td><input type="number" value="2"></td>
        <td><input type="button" class="go" value="go"></td>
    </tr>
</table>

Answer 3

:nth-child() считает элементы от 0, поэтому, чтобы получить первый элемент, вы должны ввести:: nth-child (0) (так же, как: first), для второго элемента :: nth-child (1),

Таким образом, первый подход будет хорошо работать с кодом:

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td input:first').val();
  g = $(this).closest('tr').find('td input:nth-child(1)').val(); 
});  

А для второго подхода это должно выглядеть так:

$('#table1').on('click', '.go', function(){
  var faixa = $(this).closest('tr').find('td:first').text();
  p = $(this).closest('tr').find('td:nth-child(0) input').val();
  g = $(this).closest('tr').find('td:nth-child(1) input').val();
});