jquery - 从用户输入字段中获取值

Question

我对用户输入字段问题有疑问。

用户输入内容后，我试图从输入字段中获取数据。

我的html：

<div>texts here <input type='text'></input></div>

<div>
  <table>
     <tr>
        <td>cell here</td>
        <td>cell here</td>
     </tr>
     <tr>
        <td>another cell here</td>
        <td><input type='text'></input></td>
     </tr>

  </table>
</div>

我的js

var test = $('input).val();
var test2 = $('input).html();

console.log(test)
console.log(test2)

它们都将显示在第一个输入字段中输入的第一个文本，而不是表中的第二个。

有人可以帮我吗？非常感谢！

Answer 1

为输入提供一个唯一的 ID，您的问题就解决了。

<div>texts here <input id="input_one" type='text'></input></div>
 <div>
  <table>
     <tr>
        <td>cell here</td>
        <td>cell here</td>
     </tr>
     <tr>
        <td>another cell here</td>
        <td><input id="input_two" type='text'></input></td>
     </tr>
  </table>
</div>

然后使用：

var test = $('#input_one').val();
var test2 = $('#input_two').val();

console.log(test)
console.log(test2)

另一种选择，如果您不想使用 ID 但知道它们在 DOM 树中的位置，您可以使用：

var test3 = $('input').eq(0).val();
var test4 = $('input').eq(1).val();

演示在这里

Answer 2

$('input')指具有多个元素的 jQuery 对象，调用类似val()or的函数html()将仅返回第一个匹配元素的值。

要获取所有值，您需要遍历对象中的每个元素：

$('input').each(function(){
    console.log($(this).val());
});

Answer 3

好吧，您错误地抓住了它们。由于您没有使用 id 或 class 或类似的东西来识别它们，因此jQuery在这两种情况下都将其解释为“第一个输入”。

var test  = $('input').val();
var test2 = $('table input').val(); // Grabs the value of the
                                    // input inside the table

console.log(test);
console.log(test2);

Answer 4

为您的输入字段提供 id，然后提取 .like

<td><input type='text' id='abc'></input></td>

提取物

var test = $('#abc').val();

Answer 5

您确实应该在输入中添加类或标识符。这会让事情变得更容易。例如：

<input type='text' class='name'/>

然后在 jQuery 中：

$(".name").val();

其次，您可以在不更改 HTML 的情况下获取单个值，如下所示：

var test = $("div > input").val();
var test2 = $("table input").val();

您的代码不起作用的原因是因为使用简单的 $("input") 将获取所有输入值。因此， $("input").val() 返回选择器找到的第一个 .val() ，这是第一个输入。

Answer 6

尝试

$('input').each(function(){
    var value = $(this).val();
    console.log(value);

});