javascript - jQuery，无法获取文本框的值

Question

在我的代码中，我可以获取对象但不能获取值。如何获取 .cups 文本框的值？谢谢。

HTML:

<tr id="20">

      <td class="description">CHEESE,FONTINA</td>
      <td><input type="text" class="cups" value=""></td>
      <td><input type="checkbox" class="breakfast"></td>
      <td><input type="checkbox" class="lunch"></td>
      <td><input type="checkbox" class="dinner"></td>
      <td><input type="checkbox" class="snack"></td>
      <td><input type="checkbox" class="favorites"></td>
      <td><label class="addFood"><input type="button" class="input_text_custom input_button" value="Add"></label></td>

</tr>

JS:

$(document).ready(function () {

    $('.addFood').click(function () {

        var tr = $(this).parents('tr');

        var foodId = tr.attr('id');  // works
        var servings = tr.children('.cups');  // returns [object Object]
        var servings = tr.children('.cups').val();  // returns undefined
        alert(servings);

    });

});

Answer 1

<input>是 <tr> 的孙子, 不是 child ，所以它不会被 .children 选择当你尝试它时，你会得到一个没有成员的 jQuery 对象(这类似于一个空数组)。

使用 .find 相反，它对后代进行操作。