JQuery将文本框集合设置为空值

Question

如何清空文本框的值？以下是我想到的代码，但好像没有效果。

var txtName = $("input#txtName"),txtPrice = $("input#txtPrice");

第一种方法

$(txtName,txtPrice).val("");

• 这是错误的，因为价格文本框现在变成了要搜索的上下文。

第二种方法

$([txtName,txtPrice]).val("");

• 我不明白为什么要这样做，因为它们已经是jQuery对象（但可以工作）。

我将它们放在变量中，因为它们在脚本中进一步使用。

- Deeptechtons

---

我认为第一个方法不起作用而第二个方法起作用的原因是它们采用了不同的方法。jQuery的init方法定义如下： init: function( selector, context, rootjQuery )， 所以第一个方法设置了选择器和上下文，而第二个方法只设置了选择器。（选择器也可以是节点类型和非节点类型的数组。请参见jQuery的代码） - guy mograbi

Answer 1

以下是几种做法：

txtName.add(txtPrice).val("");
// OR
$("input#txtName,input#txtPrice").val("");

(顺便提一下，你的 txtPrice 输入框中有一个 $ 符号。)

第一种方法没有起作用，因为它是使用 jQuery 选择器的一种方式。当你像这样使用 jQuery 时，第一个参数将是选择器，第二个参数将是选择器作用的容器对象。基本上它和这种方式几乎是一样的;

$(txtPrice).find(txtName).val("");

因为在 txtPrice 中没有 txtName，所以两个值都不会被清空。

第二种方法之所以有效，是因为你将参数作为一个数组传递给了 jQuery 选择器。它接受并对数组中的每个元素执行 .val() 操作。这种方式是合法的，但因为你的变量已经是 jQuery 对象，所以不需要使用这种方式。

- Emre Erkan

---

$("input#txtName,input#txtPrice")" 是可行的，但我避免使用它，因为我需要在脚本的后面进一步使用这些文本框，此时遍历 DOM 是浪费资源的。 - Deeptechtons

我想最适合的方法是 .add()。它不会修改原始集合。这里有一个 jsFiddle 示例。 - Emre Erkan

Answer 2

$('input[type=text]').val('');

或者

$('input[type=text]').each(function(){ $(this).val(''); });

- King Friday

Answer 3

考虑到你的变量：

var txtName = $("input#txtName"),txtPrice = $("input#txtPrice");

您可以这样直接访问jQuery方法：

txtName.val("");
txtPrice.val("");

因为它们已经是 jQuery 对象了，所以不需要再尝试将它们包装在 $() jQuery 函数中。

就我所知，jQuery 函数 仅接受数组时，数组元素必须是 DOM 元素，而非 jQuery 对象。（如果它能使用 jQuery 对象工作，那似乎没有在文档中提及，而当我尝试过时它并没有起作用。）因此，考虑到您选择的是 ID，且您知道每个 jQuery 对象仅有一个元素，您可以尝试这样做：

$([txtName[0],txtPrice[0]]).val("");

但这仍然会创建一个包含两个元素的新jQuery对象，因此当您可以按照我最初提到的方式执行时，它似乎有点冗余。

（还要注意，在您的选择器“input#txtName”中，“input”部分是多余的，因为您随后通过id进行选择，而id在页面上是唯一的。）

编辑：如果您有一个非常长的变量列表并想要节省输入，另一种方法是像这样：

$.each([txtName,txtPrice,txtTest1,txtTest2,txtTest3],function(i,v) { v.val(""); });

- nnnnnn

---

我是否可以通过再次使用jQuery来节省一些空间和打字量？此外，jQuery最初就是为解决这些迭代任务而编写的。 - Deeptechtons

你可以省略一点打字，但是考虑到你已经关注代码的效率（你提到你创建变量是为了在多个地方使用它们），为什么还要创建另一个（临时的）jQuery对象来设置值呢？ - nnnnnn

Answer 4

令人惊讶的是这个方法能够运行， $([txtName,txtPrice]).each(function(){this.val("")});

- Deeptechtons