无法实现jQuery each()功能，求表单提交时输入框校验方案

嘿，这个场景完全不用纠结容器数量的问题——jQuery的选择器本来就是全局查找匹配元素的，不管它们嵌套在多少个.question-editor-answer-container里都能轻松选中。下面给你一步步拆解实现方法：

核心思路 #

直接通过类名选中所有目标输入框，用each()逐个校验是否填写，最后根据校验结果决定是否允许表单提交。

完整代码示例 #

HTML结构（基于你提供的片段补全）

<form id="question-form">
  <div class="question-editor-answers">
    <div class="question-editor-answer-container">
      <input type="text" class="question-editor-answer" placeholder="请输入答案1">
    </div>
    <div class="question-editor-answer-container">
      <input type="text" class="question-editor-answer" placeholder="请输入答案2">
    </div>
    <!-- 这里可以有N个类似的容器 -->
  </div>
  <button type="submit">提交表单</button>
</form>

jQuery校验代码

// 绑定表单提交事件
$('#question-form').on('submit', function(e) {
  let isAllFilled = true; // 标记是否所有输入框都已填写

  // 遍历所有.question-editor-answer输入框
  $('.question-editor-answer').each(function() {
    // 拿到当前输入框的值，去除首尾空格
    const inputValue = $.trim($(this).val());
    
    // 如果值为空，标记校验不通过，并给用户提示
    if (!inputValue) {
      isAllFilled = false;
      $(this).addClass('error-border'); // 自定义错误样式，比如红色边框
      alert('请填写所有答案输入框');
      return false; // 跳出each循环，不用继续检查剩下的
    } else {
      $(this).removeClass('error-border'); // 移除错误样式（如果之前有的话）
    }
  });

  // 如果有未填写的，阻止表单默认提交行为
  if (!isAllFilled) {
    e.preventDefault();
  }
});

关键细节解释 #

• 选择器的灵活性：$('.question-editor-answer')会直接找到页面上所有带有这个类的元素，完全不受.question-editor-answer-container数量和位置的限制。
• trim()的必要性：用$.trim()处理输入值，能避免用户只输入空格就通过校验的情况，让校验更严谨。
• 提前终止遍历：当找到第一个未填写的输入框时，return false可以直接终止each()循环，不用浪费资源检查剩下的元素，同时立刻给用户反馈。
• 可视化错误提示：给未填写的输入框加错误样式，比单纯的弹窗提示更直观，用户能快速定位到未填写的位置。

这样处理后，不管你的容器有多少个、输入框分散在什么位置，都能准确完成提交前的校验啦～

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