如何使用 jQuery 循环遍历表单中的输入元素？答案

【问题标题】：How do I generically loop through input elements in a form using jQuery?如何使用 jQuery 循环遍历表单中的输入元素？
【发布时间】：2015-05-22 13:30:34
【问题描述】：

我正在尝试使用 jQuery 循环遍历表单中的输入元素，以便我可以进行一些轻量级的客户端验证。我正在使用 Django 生成页面服务器端，我遇到的问题是特定页面有许多动态生成的表单，所以我事先不知道它们的 id。如果我这样做了，我可以轻松地进行验证。

所以在我的 javascript 中，我试图捕获表单的提交操作，当找到它时，以某种方式获取输入元素，以便我可以检查参数。以下是我尝试过的其他方法：

$(".s-inputs").submit(function(event){      
  $(this).filter(':input').each(function(){
    console.log("Doesn't work");
  });
  event.preventDefault();
});

我尝试在下面包含生成 html 表单的 django 代码，但模板系统中的某些东西正在抛弃 Stack Overflow 的格式。无论如何，我认为这不会很有启发性。本质上，我的 html 只是页面上任意数量的表单，每个表单都有任意数量的输入，所有这些都是动态生成的服务器端。它们唯一的共同点是“s-inputs”类。

感谢您的帮助。

【问题讨论】：

还包括您选择的部分html
它本质上是任意数量的通用包含任意数量的，我事先不知道其中的数量。我可以为它们分配所有相同的类，并且可以使用 django 的工具为它们每一个分配一个唯一的 ID，但我不知道会生成多少个，所以我无法在 javascript 中对这些 ID 进行硬编码。我需要一种通用和程序化的方式来遍历响应 jquery .submit() 函数的表单中的内部输入。请参阅此处以获取带有输入的示例表单：linkThanks。

标签： javascript jquery django-templates client-side-validation

【解决方案1】：

你应该使用find()，而不是filter()：

$(this).find(':input').each(function(){
  console.log("Doesn't work");
});

filter() 尝试过滤当前选定的元素（当前只是您的form 元素）并删除任何不是过滤对象的内容。这不会返回任何内容，因为您的 form 元素与 :input 不匹配。

find() 另一方面，搜索包含在当前选定元素中的任何匹配选择器。这将匹配您的form 中包含的任何匹配的:input 元素。

【讨论】：

感谢您的回复。将其更改为 find 会取得一些进展。现在我收到一条消息记录到控制台。但是，只有一条消息被记录，并且该表单中有两个输入。当有两个输入时，它为什么只循环一次？请查看我生成的 HTML 的样子：jsfiddle.net/rxwwoo2a 谢谢。