使用 jquery 获取 child 元素

Question

我想在 class start 的值更改时使用 class end 获取输入。

我也可以有超过 1 个 end 和 start class

<tr class="input-proporsional">
   <td>1. Start -</td>
   <td>
   <input type="text" name="start[]" class="form-control start" style="width: 60px"> // when the value is changed 
</td>
   <td>End -</td>
   <td>
   <input type="text" name="end[]" class="form-control end" style="width: 60px"> // get this input
</td>
   <td>Rate</td>
   <td><input type="text" name="rate[]" class="form-control rate" style="width: 90px"></td>
</tr>

<tr class="input-proporsional">
   <td>2. Start -</td>
   <td>
   <input type="text" name="start[]" class="form-control start" style="width: 60px"> 
</td>
   <td>End -</td>
   <td>
   <input type="text" name="end[]" class="form-control end" style="width: 60px">
</td>
   <td>Rate</td>
   <td><input type="text" name="rate[]" class="form-control rate" style="width: 90px"></td>
</tr>

到目前为止，我已经尝试过如下代码：

$(".start").on("change", function() {
  let element = $(this).parent().parent().find('td').children('end').html();
  console.log(element);
}

但仍然无法正常工作，它 return undefined 进入控制台。如果这样写我的代码（最多 tr parent）：

console.log($(this).parent().parent().html());

结果是这样的（我得到了所有的td）：

<td>1. Start -</td>
<td><input type="text" name="start[]" class="form-control start" style="width: 60px"></td>
<t>End -</td>
<td><input type="text" name="end[]" class="form-control end" style="width: 60px"></td>
<td>Rate</td>
<td><input type="text" name="rate[]" class="form-control rate" style="width: 90px"></td>

Answer 1

你将不得不使用 .closest()

$(".start").on("change", function() {
  let element = $(this).closest('tr').find('.end').html();
  console.log(element);
}

Answer 2

或者您可以使用 parents，例如：

$(".start").on("change", function() {
  let element = $(this).parents("tr").find(".end");
  console.log(element)
});

使用 jquery 获取 child 元素

Get child element using jquery

html

javascript

jquery