使用jQuery/JS重置多个表单时遇到的代码精简问题

嘿，这个问题我之前踩过坑！核心原因是你用错了jQuery选择器的多元素语法规则。

为什么精简后的代码失效？ #

jQuery的$()函数参数规则是这样的：第一个参数是选择器字符串，第二个参数是可选的上下文（用来限定查找范围的DOM/jQuery对象），第三个及以后的参数会被直接忽略。

你写的代码：

$('form#s1','form#s2','form#s3').each(function() { this.reset() });

实际执行逻辑是：在'form#s2'这个上下文里查找匹配'form#s1'的元素——这显然找不到任何结果，自然不会执行reset操作。

正确的精简写法 #

要同时选择多个元素，你需要把所有选择器放在同一个字符串里，用逗号分隔，这才是jQuery支持的多选择器语法：

$('form#s1, form#s2, form#s3').each(function() { this.reset() });

额外优化小技巧 #

因为HTML里的id是全局唯一的，你甚至可以省略form前缀，直接通过id选择元素，代码更简洁：

$('#s1, #s2, #s3').each(function() { this.reset() });

这样写法既简洁，又能精准定位到目标表单，执行reset的效果和你原来的代码完全一致。

内容的提问来源于stack exchange，提问作者spice