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。

我建议使用从第0个索引开始的.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）（所以它＆＃ 39; s与：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();
});

在TD标签内选择输入问题

3 个答案: